如何自訂kindeditor編輯器的工具列items即去除不必要的工具列或者保留部分工具列

來源:互聯網
上載者:User
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項:


view source print ? 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:表示下標;如同: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的方法


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


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


view source print ? 1. KindEditor.ready(function(K) { 2.     editor = K.create('textarea[name="content"]', { 3.                items:["image", "multiimage"] //配置kindeditor編輯器的工具列功能表項目 4.          }); 5. });

上面就只配置了單個圖片上傳和批量上傳兩個功能表項目,最終顯示頁面的kindeditor編輯器的時候工具列就只能夠上傳圖片的。

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.