如何配置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编辑器的时候工具栏就只能够前进后退跟上传图片了。
如何配置kindeditor的工具栏的更多相关文章
- ASP.NET配置KindEditor文本编辑器-图文实例
1.什么是KindEditor KindEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(tex ...
- ASP.NET配置KindEditor文本编辑器
文本编辑器:CKEditor和CKFinder KindEditor 1.KindEditor KindEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开 ...
- ASP.NET 配置KindEditor文本编辑器
ASP.NET 配置KindEditor文本编辑器 跟着这篇博客做了两个小时,只搞出了下面这么个东西. 时间浪费在了原博客里这样的一句话:将kindeditor/asp.net/bin/LitJSON ...
- 配置KindEditor富文本编辑器
第一步:首先我们要到KindEditor官网下载资源包-点击进入官网下载KindEditor资源包 第二部:在下载完了KindEditor的资源包后解压结构如下图所示: 里面包括集中语言的文件上传后台 ...
- kindEditor富文本编辑器的工具栏设置
如何配置kindeditor的工具栏 kindeditor编辑器的工具栏主要是指编辑器输入框上方的那些可以操作的菜单,默认情况下编辑器是给予了所有的工具栏.针对不同的用户,不同的项目,不同的环境,可能 ...
- 如何自定义kindeditor编辑器的工具栏items即去除不必要的工具栏或者保留部分工具栏
kindeditor编辑器的工具栏主要是指编辑器输入框上方的那些可以操作的菜单,默认情况下编辑器是给予了所有的工具栏.针对不同的用户,不同的项目,不同的环境,可能就需要保留部分工具栏.那么我们应该如何 ...
- CKEditor (Toolbar Definition)工具栏自定义配置
JS是大小写敏感的, 在设置配置文件的时候需要注意 以CKEditor 4为基础我们可以通过两种方式配置CKEditor的工具栏,一种是是通过config.js配置文件设置, 另一种是IN-PAGE方 ...
- kindeditor编辑器的使用
KindEditor是一款用Javascript编写的开源在线HTML编辑器,主要用户是让用户在网站上获得可见即可得的编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(texta ...
- KindEditor编辑器(初始化参数)
width 编辑器的宽度,可以设置px或%,比textarea输入框样式表宽度优先度高. 数据类型: String 默认值: textarea输入框的宽度 示例: K.create('#id', { ...
随机推荐
- gcc 带参数进行编译
gcc -DYES -o helloyes hello.c 在hello.c中存在 #ifdefine YES ........
- P2058 海港
原题链接 https://www.luogu.org/problemnew/show/P2058 这道题昨天qyf大佬刚给我们讲了一下,所以今天就把它做啦! qyf大佬的思路和我的是一样的(其实是借 ...
- Spring事务管理的一些注意点
在<Spring Boot事务管理(下)>中,已经介绍了如果在 protected.private 或者默认可见性的方法上使用@Transactional,事务将是摆设,也不会抛出任何异常 ...
- 查询Oracle正在执行的sql语句及kill被锁的表
查询Oracle正在执行的sql语句及执行该语句的用户SELECT b.sid oracleID, b.username 登录Oracle用户名, b.serial#, spid 操作系统ID, pa ...
- spring boot定时任务
介绍 该demo是基于注解(@Scheduled)以及多线程执行的定时任务. 步骤 启用异步执行 springboot实现异步调用 入口类添加启动注解 @EnableScheduling @Enabl ...
- 【原创】CancellableWait
应用程序不能正常退出,导致无法关机,这种情况通常是应用程序在等待一些I/O request to finish. 应用程序访问远程文件时,这种情况的发生更加频繁. If an application ...
- C语言和Python语言在存储变量方面的不同
C语言和Python语言在存储变量方面的不同 众所周知,Python是脚本语言,边解释边执行,而C语言是编译型语言 存储变量: C语言定义变量,变量本身代表的就是大小,任何一个字母或者数字 符号均可以 ...
- 史上最详细的C语言和Python的选择排序算法
未经同意,请勿转载!如有收货,请留一赞,不胜感激! 同时欢迎加入我们的qq交流群:326079727 话不多说上代码: C语言: //选择排序走起 //原理:吃透原理再去实现,选择排序也是类似于冒泡排 ...
- Python全国二级等级考试(2019)
一.前言 2018年9月随着全国计算机等级考试科目中加入“二级Python”,也确立了Python在国内的地位,猪哥相信Python语言势必会像PS那般普及.不久的将来,谁会Python谁就能获得女神 ...
- 使 nodejs 代码 在后端运行(forever)
情境 运行nodejs的程序,使用命令:node xxx.js,但是关掉终端,程序也关闭了,如何让node app的程序一直运行? 解决 1.安装forever npm install -g fore ...