【Kindeditor】Kindeditor编辑器的工具栏items自定义

今天把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所表示的含义进行一个说明：

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的方法

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:["image", "multiimage"] //配置kindeditor编辑器的工具栏菜单项 }); });

上面就只配置了单个图片上传和批量上传两个菜单项，最终显示页面的kindeditor编辑器的时候工具栏就只能够上传图片的。

转自：http://blog.csdn.net/tager_liu/article/details/17144087