自定义调整kindeditor编辑器的工具栏items项目

程序员文章站 2022-05-26 18:39:39

...

kindeditor编辑器的工具栏主要是指编辑器输入框上方的那些可以操作的菜单，默认情况下编辑器是给予了所有的工具栏。针对不同的用户，不同的项目，不同的环境，可能就需要保留部分工具栏。那么我们应该如何自定义自己想要的工具栏呢？工具栏如何编辑呢？我们分几种情况来加以阐述：

第一种：修改原始文件kindeditor.js对工具栏进行统一调整

kindeditor编辑器包内有一个kindeditor.js或者kindeditor-min.js文件，这个文件主要是包含了编辑器的整个基本配置以及一些基本的函数好方法。通过查找定位kindeditor编辑器的基本配置属性options,然后可以看到其内有一个items项：

	zIndex : 811213,
	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的方法。如果在create方法内尚未对其items进行任何指定，那么就会默认继承kindeditor.js内的items的配置，也就是全部菜单。当我们在create方法内指定了items属性后就会值显示这里所配置的工具栏菜单，如：

KindEditor.ready(function(K) {
    editor = K.create('textarea[name="content"]', {
        items:["image", "multiimage"] //配置kindeditor编辑器的工具栏菜单项
    });
});

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