自定義kindeditor編輯器

第一種：修改原始文件kindeditor.js對工具欄進行統一調整

kindeditor編輯器包內有一個kindeditor.js或者kindeditor-min.js文件，這個文件主要是包含了編輯器的整個基本配置以及一些基本的函數好方法。通過查找定位kindeditor編輯器的基本配置屬性options,然後可以看到其內有一個items項：

1.items: ["source", "|", "undo", "redo", "|", "preview", "print", "template", "code", "cut","copy", "paste", "plainpaste", "wordpaste",
2."|", "justifyleft", "justifycenter", "justifyright", "justifyfull", "insertorderedlist","insertunorderedlist", "indent", "outdent", "subscript", "superscript", "clearhtml","quickformat", "selectall", "|", "fullscreen", "/", "formatblock", "fontname", "fontsize", "|","forecolor", "hilitecolor", "bold", "italic", "underline", "strikethrough", "lineheight","removeformat", "|", "image", "multiimage", "flash", "media", "insertfile", "table", "hr","emoticons", "baidumap", "pagebreak", "anchor", "link", "unlink", "|", "about"]

這個items所配置的就是kindeditor編輯器所有的工具欄菜單項。我們可以在這裏統一修改保留自己想要的幾個菜單即可。另外這對每一個菜單code所表示的含義進行一個說明：

source：表示可以切換編輯器的編輯模式進入源代碼HTML查看模式；

undo：表示後退，也就是我們常用的CTRL+Z快捷鍵功能；

redo：表示前進，也就是我們常用的CTRL+Y快捷鍵功能；

preview：表示預覽，點擊可以提前預覽編輯器內的內容所展示的效果。

print：表示打印編輯器內的內容。

template：表示可以插入編輯器內的模板窗體；

code：表示可以插入代碼段；

cut：表示剪切；

copy：表示複製，如同CTRL+C；

paste：表示粘貼，如同CTRL+V；

plainpaste：表示粘貼為無格式文本，主要是用於比如想賦值其他有HTML格式的純文本進入編輯器，可以先在這裏麵進行HTML標簽的過濾；

wordpaste：表示從WORD內粘貼；

justifyleft：表示選中文本居左；

justifycenter：表示選中文本居中；

justifyright：表示選中文本居右；

justifyfull：表示兩端對齊；

insertorderedlist：表示編號（1、2、3）；

insertunorderedlist：表示項目符號；

indent：表示增加縮進；

outdent：表示減少縮進；

subscript：表示下標；如同：X₂

superscript：表示上標；如同：X²

^{clearhtml：表示清除HTML標簽；}

^{quickformat：表示快速排版；}

^{selectall：表示全選；}

^{fullscreen：表示全屏；}

^{formatblock：表示段落；}

^{fontname：表示字體；}

^{fontsize：表示文字大小；}

^{forecolor：表示文字顏色；}

^{hilitecolor：表示文字背景色；}

^{bold：表示文字加粗；}

^{italic：表示文字斜體；}

^{underline：表示給文字追加下劃線；}

^{strikethrough：表示給文字追加刪除線；}

lineheight：表示調整行距；

removeformat：表示刪除選中段的格式；

image：表示單個上傳圖片；

multiimage：表示批量上傳圖片；

flash：表示插入flash；

media：表示插入音視頻文件；

insertfile：表示插入文件；

table：表示插入表格；

hr：表示插入橫線；

emoticons：表示插入表情；

baidumap：表示插入地圖；

pagebreak：表示插入分頁符；

anchor：表示插入錨點；

link：表示插入超鏈接；

unlink：表示取消超級鏈接；一般和link配合出現；

about：表示關於kindeditor編輯器的信息；

第二種：在使用kindeditor編輯器的頁麵內進行配置工具欄菜單

我們在頁麵內如果要用kindeditor編輯器都會編寫一個KindEditor.ready的方法

1.KindEditor.ready(function(K) {
2.    editor = K.create('textarea[name="content"]', {
3.                
4.         });
5.});

如果在create方法內尚未對其items進行任何指定，那麼就會默認繼承kindeditor.js內的items的配置，也就是全部菜單。當我們在create方法內指定了items屬性後就會值顯示這裏所配置的工具欄菜單，如：

1.KindEditor.ready(function(K) {
2.    editor = K.create('textarea[name="content"]', {
3.               items:["image", "multiimage"] //配置kindeditor編輯器的工具欄菜單項
4.         });
5.});

上麵就隻配置了單個圖片上傳和批量上傳兩個菜單項，最終顯示頁麵的kindeditor編輯器的時候工具欄就隻能夠上傳圖片的。