如何配置kindeditor的工具欄

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

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

第一種：修改原始文件kindeditor.js對工具欄進(jìn)行統(tǒng)一調(diào)整

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

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編輯器所有的工具欄菜單項(xiàng)。我們可以在這里統(tǒng)一修改保留自己想要的幾個菜單即可。另外這對每一個菜單code所表示的含義進(jìn)行一個說明：

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

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

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

preview：表示預(yù)覽，點(diǎn)擊可以提前預(yù)覽編輯器內(nèi)的內(nèi)容所展示的效果。

print：表示打印編輯器內(nèi)的內(nèi)容。

template：表示可以插入編輯器內(nèi)的模板窗體；

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

cut：表示剪切；

copy：表示復(fù)制，如同CTRL+C；

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

plainpaste：表示粘貼為無格式文本，主要是用于比如想賦值其他有HTML格式的純文本進(jìn)入編輯器，可以先在這里面進(jìn)行HTML標(biāo)簽的過濾；

wordpaste：表示從WORD內(nèi)粘貼；

justifyleft：表示選中文本居左；

justifycenter：表示選中文本居中；

justifyright：表示選中文本居右；

justifyfull：表示兩端對齊；

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

insertunorderedlist：表示項(xiàng)目符號；

indent：表示增加縮進(jìn)；

outdent：表示減少縮進(jìn)；

subscript：表示下標(biāo)；如同：X₂

superscript：表示上標(biāo)；如同：X²

^{clearhtml：表示清除HTML標(biāo)簽；}

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

^{selectall：表示全選；}

^{fullscreen：表示全屏；}

^{formatblock：表示段落；}

^{fontname：表示字體；}

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

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

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

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

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

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

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

lineheight：表示調(diào)整行距；

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

image：表示單個上傳圖片；

multiimage：表示批量上傳圖片；

flash：表示插入flash；

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

insertfile：表示插入文件；

table：表示插入表格；

hr：表示插入橫線；

emoticons：表示插入表情；

baidumap：表示插入地圖；

pagebreak：表示插入分頁符；

anchor：表示插入錨點(diǎn)；

link：表示插入超鏈接；

unlink：表示取消超級鏈接；一般和link配合出現(xiàn)；

about：表示關(guān)于kindeditor編輯器的信息；

?

第二種：在使用kindeditor編輯器的頁面內(nèi)進(jìn)行配置工具欄菜單

我們在頁面內(nèi)如果要用kindeditor編輯器都會編寫一個KindEditor.ready的方法

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

?

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

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

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

轉(zhuǎn)載于:https://www.cnblogs.com/zxwBj/p/8676270.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。