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

如何配置kindeditor的工具栏的更多相关文章

  1. ASP.NET配置KindEditor文本编辑器-图文实例

    1.什么是KindEditor KindEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(tex ...

  2. ASP.NET配置KindEditor文本编辑器

    文本编辑器:CKEditor和CKFinder  KindEditor 1.KindEditor KindEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开 ...

  3. ASP.NET 配置KindEditor文本编辑器

    ASP.NET 配置KindEditor文本编辑器 跟着这篇博客做了两个小时,只搞出了下面这么个东西. 时间浪费在了原博客里这样的一句话:将kindeditor/asp.net/bin/LitJSON ...

  4. 配置KindEditor富文本编辑器

    第一步:首先我们要到KindEditor官网下载资源包-点击进入官网下载KindEditor资源包 第二部:在下载完了KindEditor的资源包后解压结构如下图所示: 里面包括集中语言的文件上传后台 ...

  5. kindEditor富文本编辑器的工具栏设置

    如何配置kindeditor的工具栏 kindeditor编辑器的工具栏主要是指编辑器输入框上方的那些可以操作的菜单,默认情况下编辑器是给予了所有的工具栏.针对不同的用户,不同的项目,不同的环境,可能 ...

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

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

  7. CKEditor (Toolbar Definition)工具栏自定义配置

    JS是大小写敏感的, 在设置配置文件的时候需要注意 以CKEditor 4为基础我们可以通过两种方式配置CKEditor的工具栏,一种是是通过config.js配置文件设置, 另一种是IN-PAGE方 ...

  8. kindeditor编辑器的使用

    KindEditor是一款用Javascript编写的开源在线HTML编辑器,主要用户是让用户在网站上获得可见即可得的编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(texta ...

  9. KindEditor编辑器(初始化参数)

    width 编辑器的宽度,可以设置px或%,比textarea输入框样式表宽度优先度高. 数据类型: String 默认值: textarea输入框的宽度 示例: K.create('#id', {  ...

随机推荐

  1. ImportError: No module named pytz

    xxx@hostname:/opt/xx/cc$ python manage.py runserver Traceback (most recent call last): File , in < ...

  2. 安装fastFDS

    fastdfs源码包.libfastcommon源码包.nginx模块,我存放源码包于 /usr/local/src wget https://github.com/happyfish100/fast ...

  3. 2016"百度之星" - 初赛(Astar Round2A)1001 All X(HDU5690)——找循环节|快速幂

    一个由m个数字x组成的新数字,问其能否mod k等于c. 先提供第一种思路,找循环节.因为每次多一位数都是进行(t*10+x)mod k(这里是同余模的体现),因为x,k都确定,只要t再一样得到的答案 ...

  4. spring事物不回滚的问题

    学习spring分布式事务的时候,自己整了个demo,写test测试的时候发先事物没有回滚.此问题和分布式事务没关系.1.在service层引入@Transaction注解 使用 throw new ...

  5. Python——装饰器(Decorator)

    1.什么是装饰器? 装饰器放在一个函数开始定义的地方,它就像一顶帽子一样戴在这个函数的头上.和这个函数绑定在一起.在我们调用这个函数的时候,第一件事并不是执行这个函数,而是将这个函数做为参数传入它头顶 ...

  6. Linux发行版的选择

    1,需要稳定的服务器,选择CentOS 或 RHEL 2,需要自己定制的桌面系统,选择Ubuntu 3,摸索linux 各方面的知识,选择Gentoo 4,需要稳定性高的系统,选择FreeBSD 5, ...

  7. 循环引擎 greenlet 没有显式调度的微线程,换言之 协程

    小结: 1. micro-thread with no implicit scheduling; coroutines, in other words. 没有显式调度的微线程,换言之 协程 2. 一个 ...

  8. 数据分析 - Power BI

    BI 目的 单表的展示有限很多的时候只能体现现象, 仅仅进行监控级别没问题 但是就数据分析而言实在不够用, 大部分的事情需要多表多图展示才可以通过现象深入挖掘诱因 BI 安装 这里使用 microso ...

  9. 关于ios在H5页面长按识别二维码无效

    环境 框架: vue 操作系统: ios 解决 如果你的vue-router用了mode:history: 把它去掉用默认的就OK了

  10. 阶段5 3.微服务项目【学成在线】_day05 消息中间件RabbitMQ_16.RabbitMQ研究-与springboot整合-生产者代码

    springBoot给我们提供了 RarbbitTemplate发送消息 创建测试类,因为我们是基于SpringBoot的来写的测试类.所以要加上@SpringBootTest和@RunWith的注解 ...