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);如同:X2
superscript:表示上標(biāo);如同:X2
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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Java线程池介绍
- 下一篇: 如何让博客变得稍稍好看