KindEditor富文本

有時候網(wǎng)頁中需要,使用富文本編輯器,我就把使用的方法寫一下

1.下載

kindeditor下載地址

2.解壓后拿出前端需要的內(nèi)容

1.png

框起來的就是前端需要的內(nèi)容,把這幾個文件引入項(xiàng)目中

3.頁面

頁面引入kindeditor-all.js即可

4.內(nèi)容配置

在js代碼中放入以下內(nèi)容

html代碼
<textarea id="kindeditor" name="" rows="20" cols="100"></textarea> 
js代碼:
var editor;
    KindEditor.ready(function(K) {
      editor = K.create('textarea', {
      allowImageUpload: true, //上傳圖片框本地上傳的功能,false為隱藏,默認(rèn)為true
      allowImageRemote : true, //上傳圖片框網(wǎng)絡(luò)圖片的功能,false為隱藏,默認(rèn)為true
      allowFileManager : true, //瀏覽圖片空間
      items:['undo', 'redo', 'cut', 'copy', 'justifyleft', 'justifycenter', 'justifyright','justifyfull', 'insertorderedlist', 'insertunorderedlist','formatblock', 'fontname', 'fontsize', 'forecolor', 'hilitecolor', 'bold','italic', 'underline', 'strikethrough', 'lineheight','hr', 'removeformat', 'image',  'table',  'emoticons', 'pagebreak', 'anchor', 'link', 'unlink', 'about','clearhtml'], 
      afterBlur: function(){this.sync()},
      afterChange : function() {  
      } 
      });
    });

頁面出來了。

題外:配置的items項(xiàng)

source : 'HTML代碼',
undo : '后退(Ctrl+Z)',
redo : '前進(jìn)(Ctrl+Y)',
cut : '剪切(Ctrl+X)',
copy : '復(fù)制(Ctrl+C)',
paste : '粘貼(Ctrl+V)',
plainpaste : '粘貼為無格式文本',
wordpaste : '從Word粘貼',
selectall : '全選',
justifyleft : '左對齊',
justifycenter : '居中',
justifyright : '右對齊',
justifyfull : '兩端對齊',
insertorderedlist : '編號',
insertunorderedlist : '項(xiàng)目符號',
indent : '增加縮進(jìn)',
outdent : '減少縮進(jìn)',
subscript : '下標(biāo)',
superscript : '上標(biāo)',
title : '標(biāo)題',
fontname : '字體',
fontsize : '文字大小',
textcolor : '文字顏色',
bgcolor : '文字背景',
bold : '粗體(Ctrl+B)',
italic : '斜體(Ctrl+I)',
underline : '下劃線(Ctrl+U)',
strikethrough : '刪除線',
removeformat : '刪除格式',
image : '圖片',
flash : '插入Flash',
media : '插入多媒體',
table : '插入表格',
hr : '插入橫線',
emoticons : '插入表情',
link : '超級鏈接',
unlink : '取消超級鏈接',
fullscreen : '全屏顯示',
about : '關(guān)于',
print : '打印',
fileManager : '瀏覽服務(wù)器',
advtable : '表格',
yes : '確定',
no : '取消',
close : '關(guān)閉',
editImage : '圖片屬性',
deleteImage : '刪除圖片',
editLink : '超級鏈接屬性',
deleteLink : '取消超級鏈接',
tableprop : '表格屬性',
tableinsert : '插入表格',
tabledelete : '刪除表格',
tablecolinsertleft : '左側(cè)插入列',
tablecolinsertright : '右側(cè)插入列',
tablerowinsertabove : '上方插入行',
tablerowinsertbelow : '下方插入行',
tablecoldelete : '刪除列',
tablerowdelete : '刪除行',
noColor : '無顏色',
invalidImg : "請輸入有效的URL地址。\n只允許jpg,gif,bmp,png格式。",
invalidMedia : "請輸入有效的URL地址。\n只允許swf,flv,mp3,wav,wma,wmv,mid,avi,mpg,asf,rm,rmvb格式。",
invalidWidth : "寬度必須為數(shù)字。",
invalidHeight : "高度必須為數(shù)字。",
invalidBorder : "邊框必須為數(shù)字。",
invalidUrl : "請輸入有效的URL地址。",
invalidRows : '行數(shù)為必選項(xiàng),只允許輸入大于0的數(shù)字。',
invalidCols : '列數(shù)為必選項(xiàng),只允許輸入大于0的數(shù)字。',
invalidPadding : '邊距必須為數(shù)字。',
invalidSpacing : '間距必須為數(shù)字。',
invalidBorder : '邊框必須為數(shù)字。',
pleaseInput : "請輸入內(nèi)容。",
invalidJson : '服務(wù)器發(fā)生故障。',
cutError : '您的瀏覽器安全設(shè)置不允許使用剪切操作,請使用快捷鍵(Ctrl+X)來完成。',
copyError : '您的瀏覽器安全設(shè)置不允許使用復(fù)制操作,請使用快捷鍵(Ctrl+C)來完成。',
pasteError : '您的瀏覽器安全設(shè)置不允許使用粘貼操作,請使用快捷鍵(Ctrl+V)來完成。'

從這些里面挑出需要的內(nèi)容放在items數(shù)組中即可

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容