文档章节

自定义kindeditor编辑器的工具栏

十万猛虎下画山
 十万猛虎下画山
发布于 2018/05/15 16:53
字数 1313
阅读 32
收藏 0

 

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 sourceprint?

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 sourceprint?

1.KindEditor.ready(function(K) {

2.    editor = K.create('textarea[name="content"]', {

3.                

4.         });

5.});

 

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

 

view sourceprint?

1.KindEditor.ready(function(K) {

2.    editor = K.create('textarea[name="content"]', {

3.               items:["image""multiimage"//配置kindeditor编辑器的工具栏菜单项

4.         });

5.});

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

本文转载自:https://blog.csdn.net/hj850126/article/details/42964411

下一篇: 理解闭包
十万猛虎下画山
粉丝 6
博文 130
码字总数 98614
作品 0
朝阳
程序员
私信 提问
KindEditor在thinkphp上的使用方法

KindEditor是一套开源的HTML可视化编辑器,主要用于让用户在网站上获得所见即所得编辑效果,且兼容主流浏览器。与ueditor这样的大块头相比,KindEditor的优点是不言而喻的--它体积小,加载速...

网菠萝果
2012/11/20
0
0
kindeditor编辑器不支持IE6内核的浏览器? 在线等......

kindeditor编辑器不支持IE6内核的浏览器? kindeditor编辑器不支持IE6内核的浏览器? kindeditor编辑器不支持IE6内核的浏览器? kindeditor编辑器不支持IE6内核的浏览器? kindeditor编辑器不支持...

rational
2012/05/24
2.4K
8
在PHP使用kindeditor

[版本说明:kindeditor-4.0.6(下载https://code.google.com/p/kindeditor/downloads/list),php-5.2.14+Zend Framework] 1.简介 KindEditor 是一套开源的在线HTML编辑器,主要用于让用户在...

酒肉穿肠过
2013/03/18
0
12
kindeditor编辑遇到问题

不知道各位使用kindeditor的童鞋遇到过没有,我用kindeditor创建一篇文章没问题,filterMode默认设置false,比如“<”提交到数据库自动转译成“<”,正确的,正文中就不会被html解析执行,只...

Photon
2011/03/18
971
5
.NET快速信息化系统开发框架 V3.2->Web版本“产品管理”事例编辑界面新增KindEditor复文本编辑控件

  KindEditor是一套开源的HTML可视化编辑器,主要用于让用户在网站上获得所见即所得编辑效果,兼容IE、Firefox、Chrome、Safari、Opera等主流浏览器。KindEditor使用JavaScript编写,可以无...

80368704
2018/06/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

访问LNMP虚拟主机出现报错:No input file specified.

之前一直是使用lnmp一键包,但是访问创建的虚拟主机,并没有出现过的错误:No input file specified. 网上的文章很多,但是都是转载,而且原因也很多,根本不适用 后面在lnmp一键包官网找到解...

wenzhizhong
34分钟前
1
0
OSChina 周三乱弹 —— 你还能管得住观众愿意看谁吗

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @宇辰OSC :分享李宗盛的单曲《凡人歌 (电视剧《碧海情天》主题曲)》:你我皆凡人,生在人世间#今日歌曲推荐# 《凡人歌 (电视剧《碧海情天》主...

小小编辑
57分钟前
378
12
Inf2Cat, signability test failed vc2019 wdk驱动sys build签名

解决问题的方法非常简单,只要让Inf2Cat验证的时候使用local时间就可以了。打开package工程的属性,在inf2cat工具的属性中进行设置。

simpower
今天
3
0
LinkedHashMap 是如何保证有序的?

//map的遍历方法如下 for (Map.Entry<String,Integer> entry : map.entrySet()) { System.out.println(entry.getKey()+":"+entry.getValue()); } HashMap#entry......

暗中观察
今天
3
0
Linux的基本命令

目录的操作命令(增删改查) 增: mkdir 目录名称; 查: ls 可以看到该目录下的所有的目录和文件 ls -a,可以看到该目录下的所有文件和目录,包括隐藏的 ls -l,可以看到该目录下的所有目录和...

凹凸凸
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部