如何配置kindeditor的工具欄

kindeditor編輯器的工具欄主要是指編輯器輸入框上方的那些可以操作的菜單，默認情況下編輯器是給予了所有的工具欄。針對不同的用戶，不同的項目，不同的環境，可能就需要保留部分工具欄。那么我們應該如何自定義自己想要的工具欄呢？工具欄如何編輯呢？我們分幾種情況來加以闡述： 第一種：修改原始文件kindeditor.js對工具欄進行統一調整 kindeditor編輯器包內有一個kindeditor.js或者kindeditor-min.js文件，這個文件主要是包含了編輯器的整個基本配置以及一些基本的函數好方法。通過查找定位kindeditor編輯器的基本配置屬性options,然后可以看到其內有一個items項： items: ["source", "|", "undo", "redo", "|", "preview", "print",...????????????????????????????????????????????

kindeditor編輯器的工具欄主要是指編輯器輸入框上方的那些可以操作的菜單，默認情況下編輯器是給予了所有的工具欄。針對不同的用戶，不同的項目，不同的環境，可能就需要保留部分工具欄。那么我們應該如何自定義自己想要的工具欄呢？工具欄如何編輯呢？我們分幾種情況來加以闡述：

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

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

items: ["source",?"|",?"undo",?"redo",?"|",?"preview",?"print",?"template",?"code",?"cut",?"copy",?"paste",?"plainpaste",?"wordpaste", "|",?"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的方法

KindEditor.ready(function(K) { ? ??editor = K.create('textarea[name="content"]', {? ? ? ? ? ? ? ?? ? ? ? ? ?}); });

?

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

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

上面就只配置了單個圖片上傳和批量上傳兩個菜單項，最終顯示頁面的kindeditor編輯器的時候工具欄就只能夠前進后退跟上傳圖片了。

轉載于:https://www.cnblogs.com/zxwBj/p/8676270.html

總結

以上是生活随笔為你收集整理的kindEditor富文本编辑器的工具栏设置的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。