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

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编辑器的时候工具栏就只能够上传图片的。

转自:http://blog.csdn.net/hj850126/article/details/42964411

时间: 2024-10-28 12:57:20

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

(编辑器)Jquery-EasyUI集合Kindeditor编辑器

1.在html里面添加 list.html list.html (function ($, K) { if (!K) throw "KindEditor未定义!"; function create(target) { var opts = $.data(target, 'kindeditor').options; var editor = K.create(target, opts); $.data(target, 'kindeditor').options.editor = edit

KindEditor编辑器的使用

1.下载KindEditor编辑器  以KindEditor 4.1.10为例. 2.将下载解压完的KindEditor文件夹放在__ROOT__中. 3.在thinkphp中的Index/index.html中添加以下代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quo

kindeditor编辑器代码过滤解决方法.

很多朋友在使用Kindeditor编辑器的时候都会遇到这样一个问题,如:给A标签加上title属性过后,浏览的时候,却神奇般地发现title属性没有了.再次切换html源代码的时候,返现编辑器将title属性给删掉了.追究其根本原因主要是kindeditor设置了标签和属性的默认过滤机制.KindEditor默认状态下会过滤编辑器里的html代码,主要是为了生成干净的代码,就会出现我们想不到的结果,现在焦国强为大家讲解:如何避免自己手动添加的代码被不必要的过滤. 首先我们知道3.4版本以上版本默

Kindeditor编辑器上传附件,自动获取文件名显示。

大部分在线编辑器在上传附件之后都是会以路径的形式显示出来很不友好.类似这样..怎么样显示成这样用户上传的原始文件名呢.就是这样.是不是看着很友好. kindeditor编辑器上传文件是已插件的形式调用的,包括其他类似的功能(批量上传图片,百度地图)都是在plugins目录下.打开insertfile目录下的insertfile.js文件.在文件上传之后的回调函数里面找到urlBox.val(url);在下面添加一行titleBox.val(data.title);这里会把后台上传文件之后返回的j

详细介绍如何使用kindEditor编辑器

今天群里的朋友问我能不能写个kindEditor编辑器的使用教程,说是弄了半天没有搞定.由于PHP啦后台正好用了这个编辑器,我有写经验,正好教他的同时写出来分享给大家. kindEditor编辑器是一个由JS写成的在线编辑器,很多网站或CMS等都有用它,口碑不错,目前最新版本是4.1.10. 其实它的用法非常简单,我是在下载了它的安装包后看了一些demo然后就把它放到PHP啦的后台上去了.好了教程正式开始 一.下载 下载最新版本的kindEditor(官方网站kindeditor.net),下载

DWZ与KindEditor编辑器的整合

原文:DWZ与KindEditor编辑器的整合 DWZ自带的编辑器是xheditor,可能很多人用不习惯.就像我,习惯用kindeditor了.现在就来说说如何整合dwz和kindeditor. 一.打开DWZ的中的dwz.ui.js,进行修改. 首先找到 if ($.fn.xheditor) { $("textarea.editor", $p).each(function(){ var $this = $(this); var op = {html5Upload:false, ski

Kindeditor 编辑器POST提交的时候会出现符号被转换

Kindeditor编辑器输入符号单引号,双引号,斜杠 都会被转义 解决办法 $date['content']=$this->textString($_POST['content']); public function textString($string){ $string = str_replace("\'","'",$string); $string = str_replace('\"','"',$string); return $s

yourphp添加KindEditor编辑器

<tr> <td align="right">故障描述</td> <script charset="utf-8" src="./Public/Kindeditor/kindeditor-min.js"></script> <script charset="utf-8" src="./Public/Kindeditor/lang/zh_CN.js&quo

自定义GridLookUpEdit编辑器

前两天分享了GridControl的自定义编辑器,今天再来分享一下整理出来的GridLookUpEdit的自定义编辑器.本代码用的DevExpress版本号:17.2.6.0,旧的版本可能有些地方会有些微的变化.该自定义编辑器需要用到上篇中定义的MyGridView(具体代码可在自定义GridControl编辑器一文中阅览),此控件包含了多列模糊查询功能,希望对使用或正在学习DevExpress的同学有所帮助.后续有时间会陆续将一些比较实用的自定义编辑器分享出来. 1 using System;