如何配置kindeditor的工具栏

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项:

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

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

转载于:https://www.cnblogs.com/zxwBj/p/8676270.html

kindEditor富文本编辑器的工具栏设置相关推荐

  1. (转)学习淘淘商城第二十二课(KindEditor富文本编辑器的使用)

    http://blog.csdn.net/u012453843/article/details/70184155 上节课我们一起学习了怎样解决KindEditor富文本编辑器上传图片的浏览器兼容性问题 ...

  2. (转)淘淘商城系列——KindEditor富文本编辑器的使用

    http://blog.csdn.net/yerenyuan_pku/article/details/72809794 通过上文的学习,我们知道了怎样解决KindEditor富文本编辑器上传图片时的浏 ...

  3. kindeditor富文本编辑器初步使用教程

    下载kindeditor 可以选择去官网下载(http://kindeditor.net/down.php),不过要翻墙:或者直接CSDNhttp://download.csdn.net/downlo ...

  4. 学习整理在php中使用KindEditor富文本编辑器

    学习整理在php中使用KindEditor富文本编辑器 1.下载编辑器 2.部署kindeditor编辑器 3.在html页面里引入编辑器 4.Ajax提交表单时获取不到 KindEditor 内容 ...

  5. kindEditor 富文本编辑器 使用介绍

    第一版:存放位置:  ---->把该创建的文件包放到javaWeb 过程的 WEB_INF 下:如图所示. 第二步:< kindEditor 插件的引用> :JS引用 1 <s ...

  6. 淘淘商城第三天—完成商品添加功能 商品类目选择 图片上传 图片服务器搭建 kindEditor富文本编辑器的使用 商品添加功能

    1.实现商品类目选择功能 1.1需求 在商品添加页面,点击"选择类目"显示商品类目列表: 请求初始化树形控件的url:/item/cat/list 1.2 EasyUI tree数 ...

  7. django项目中使用KindEditor富文本编辑器

    先从官网下载插件,放在static文件下 前端引入 学习python中有什么不懂的地方,小编这里推荐加小编的python学习群:895,817, 687 有任何不懂的都可以在里面交流,还有很好的视频教 ...

  8. KindEditor富文本编辑器上传功能PHP语言报错问题

    问题产生过程:项目原本使用的是Ueditor编辑器,由于其中js代码有使用parentNode获取HTML节点,IE浏览器内核不支持parentNode ,会有二次加载富文本编辑器不渲染的问题,所以更 ...

  9. tinymce富文本编辑器扩展插件-设置段落间距

    项目中使用到tinymce富文本编辑器,由于官方并没有设置段落间距插件,所以自己开发了一个段落间距扩展插件.可以将其配置为toolbar,也可以配置成菜单项. 使用方法: 方式一: 1. 使用npm安 ...

最新文章

  1. 好文分享:我是如何在求职中把自己“推销”出去的
  2. pytorch载入预训练模型后,训练指定层
  3. Ubuntu中给eclipse和android studio添加桌面快捷图标
  4. java中servletcontext_java中获取ServletContext常见方法
  5. linux c程序加args,C/C++可变参数,“## __VA_ARGS__”宏的介绍和使用
  6. BZOJ 2286 消耗战 (虚树+树形DP)
  7. Python高手之路【十二】面向对象设计模式
  8. java getconstructors,java 反射 constructors的问题,真心需要解决
  9. 为tomcat分配内存
  10. 将下图的nfa确定化为dfa_实战技术利用AutoCAD确定PCB板型
  11. 生成pdf设置中文字体出错 \simsun.ttc' with 'Identity-H' is not recognized或者type of font{0} is not recognized
  12. 好用的码字软件,年入百万的大神作家们都在用
  13. 怎么才能够坚持做一件事并且把它做好?
  14. c盘满了怎么清理垃圾而不误删?C盘清理,4个方法!
  15. 视频教程-7步搞定Word样式和模板高效排版-Office/WPS
  16. 【springboot】sse接口
  17. (三)matplotlib3.0画三维图(二维热图)
  18. 手游立项(一):理解手游开发
  19. 《英文科技论文写作与学术报告》网课第二章作业答案
  20. CLIPDraw:基于CLIP的text-to-vector生成器

热门文章

  1. 使用Chrome的timeline工具分析web应用性能
  2. SAP UI5框架绘制footer区域的入口调试
  3. 通过一个实际例子理解Kubernetes里pod的自动scale - 水平自动伸缩
  4. java创建子类对象的步骤_一顿Spring骚操作:我敢说没有人比我更懂Java对象的创建!
  5. 苹果字体怎么改_GoodNotes制作电子手帐之添加中文字体
  6. IDEA创建mavenWeb项目笔记
  7. 单词拆分Python解法
  8. UE4学习-请求的操作需要提升
  9. java转net_将java库转换为.net库
  10. 有一个包含主函数的java类_重新认识Java中的程序入口即主函数各组成部分