kindEditor富文本編輯器的工具欄設置 如何配置kindeditor的工具欄

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

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所表示的含義進行一個說明:post

source:表示能夠切換編輯器的編輯模式進入源代碼HTML查看模式;字體

undo:表示後退,也就是咱們經常使用的CTRL+Z快捷鍵功能;ui

redo:表示前進,也就是咱們經常使用的CTRL+Y快捷鍵功能;url

preview:表示預覽,點擊能夠提早預覽編輯器內的內容所展現的效果。spa

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

template:表示能夠插入編輯器內的模板窗體;

code:表示能夠插入代碼段;

cut:表示剪切;

copy:表示複製,如同CTRL+C;

paste:表示粘貼,如同CTRL+V;

plainpaste:表示粘貼爲無格式文本,主要是用於好比想賦值其餘有HTML格式的純文本進入編輯器,能夠先在這裏面進行HTML標籤的過濾;

wordpaste:表示從WORD內粘貼;

justifyleft:表示選中文本居左;

justifycenter:表示選中文本居中;

justifyright:表示選中文本居右;

justifyfull:表示兩端對齊;

insertorderedlist:表示編號(一、二、3);

insertunorderedlist:表示項目符號;

indent:表示增長縮進;

outdent:表示減小縮進;

subscript:表示下標;如同:X2

superscript:表示上標;如同:X2

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編輯器的時候工具欄就只可以前進後退跟上傳圖片了。

相關文章
相關標籤/搜索