kindeditor编辑器的工具栏items的去和留

转载 2013年12月05日 16:50:53

今天把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://www.xxh.cc/showarticle/3759.html



[转]kindeditor编辑器的工具栏items的去和留

今天把kindeditor的工具栏看了看,还是有很多功能没有利用,并且去掉一部分不需要的工具。那么我们应该如何自定义自己想要的工具栏呢?工具栏如何编辑呢?分几种情况来加以阐述: 第一种:修改原始文件...
  • yingningli
  • yingningli
  • 2015年11月19日 09:17
  • 1199

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

kindeditor编辑器的工具栏主要是指编辑器输入框上方的那些可以操作的菜单,默认情况下编辑器是给予了所有的工具栏。针对不同的用户,不同的项目,不同的环境,可能就需要保留部分工具栏。那么我们应该如何...
  • qxl2012
  • qxl2012
  • 2017年09月21日 15:01
  • 130

如何自定义kindeditor编辑器的工具栏items即去除不必要的工具栏或者保留部分工具栏

kindeditor编辑器的工具栏主要是指编辑器输入框上方的那些可以操作的菜单,默认情况下编辑器是给予了所有的工具栏。针对不同的用户,不同的项目,不同的环境,可能就需要保留部分工具栏。那么我们应该如何...
  • HJ850126
  • HJ850126
  • 2015年01月21日 10:12
  • 12642

DEDECMS中添加kindeditor编辑器【只读模式】【空白导航】

DEDECMS中添加kindeditor编辑器【只读模式】【空白导航】
  • netuser1937
  • netuser1937
  • 2017年01月09日 14:53
  • 568

java常用的编辑器之kindeditor

先上图,没图差不多就看不下去的,我懂! 来个毛爷的,看着好像就能发财一样。。。。 首先下载必要的文件和jar包:http://download.csdn.net/detail/xb...
  • xb12369
  • xb12369
  • 2016年05月11日 17:17
  • 2439

dedecms V5.7笔记:替换为kindeditor编辑器出现了乱码和栏目内容无法保存修改的解决方案

kindeditor编辑器简单方便,比织梦的好得多。要修改的方法很简单:去下这个插件文档。比官方论坛里的好得多 最后的修改日期是2013年5月份。 安装方法也简单! [系统]-[核心设置],在“Ht...
  • amhoho
  • amhoho
  • 2014年03月30日 16:54
  • 1561

KindEditor使用过程中,用JQ提交表单时,获取不到编辑器的内容

首先要说明的是,在使用提交按钮直接提交时,编辑器的内容是可以正常获取的,而使用 jq或js ,如$("#form").submit(),提交时,则编辑器的内容是无法获取的,这里在 kindEditor...
  • w_yunlong
  • w_yunlong
  • 2015年12月29日 11:59
  • 3749

清空KindEditor编辑器内容

//创建 var editor = KindEditor.create("textarea[name='desc']", {....}); //清空kindeditor的内容 editor.html(...
  • zsg88
  • zsg88
  • 2017年05月22日 00:25
  • 1116

为KindEditor编辑器中的内容增加样式,使得自定义前台页面显示效果与编辑器效果一致

KindEditor 本身自带有一定的样式,且为内部样式,在使用过程中,难免会发现部分效果不是我们想要的,因此,KindEditor提代了两种方式供使用着调用 1、内部样式,通过 cssData 属性...
  • w_yunlong
  • w_yunlong
  • 2015年12月29日 11:59
  • 5682

关于kindEditor获取编辑内容dom节点

整理与项目中,同时方便他人,不喜勿喷
  • qq_33571718
  • qq_33571718
  • 2016年07月21日 16:08
  • 1065
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:kindeditor编辑器的工具栏items的去和留
举报原因:
原因补充:

(最多只允许输入30个字)