如何自定義kindeditor編輯器的工具欄items即去除不必要的工具欄或者保留部分工具欄
kindeditor編輯器的工具欄主要是指編輯器輸入框上方的那些可以操作的選單,預設情況下編輯器是給予了所有的工具欄。針對不同的使用者,不同的專案,不同的環境,可能就需要保留部分工具欄。那麼我們應該如何自定義自己想要的工具欄呢?工具欄如何編輯呢?我們分幾種情況來加以闡述:
第一種:修改原始檔案kindeditor.js對工具欄進行統一調整
kindeditor編輯器包內有一個kindeditor.js或者kindeditor-min.js檔案,這個檔案主要是包含了編輯器的整個基本配置以及一些基本的函式好方法。通過查詢定位kindeditor編輯器的基本配置屬性options,然後可以看到其內有一個items項:
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的方法
1.
KindEditor.ready(
function
(K)
{
2.
editor
= K.create(
'textarea[name="content"]'
,
{
3.
4.
});
5.
});
如果在create方法內尚未對其items進行任何指定,那麼就會預設繼承kindeditor.js內的items的配置,也就是全部選單。當我們在create方法內指定了items屬性後就會值顯示這裡所配置的工具欄選單,如:
1.
KindEditor.ready(
function
(K)
{
2.
editor
= K.create(
'textarea[name="content"]'
,
{
3.
items:[
"image"
,
"multiimage"
]
//配置kindeditor編輯器的工具欄選單項
4.
});
5.
});
上面就只配置了單個圖片上傳和批量上傳兩個選單項,最終顯示頁面的kindeditor編輯器的時候工具欄就只能夠上傳圖片的。
這一篇文章對於如何自定義工具欄選單我想算是一個比較全面和深入的講解了的,希望大家能夠明白。謝謝支援!