当前位置:网站首页>自定义kindeditor编辑器的工具栏,items即去除不必要的工具栏或者保留部分工具栏
自定义kindeditor编辑器的工具栏,items即去除不必要的工具栏或者保留部分工具栏
2022-06-24 09:40:00 【徊忆羽菲】
自定义kindeditor编辑器的工具栏,items即去除不必要的工具栏或者保留部分工具栏
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', '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',
'media', 'table', 'hr', 'emoticons', 'baidumap',
'link', 'unlink', '|'
],
这个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编辑器的工具栏菜单项
});
});
如下图:只保留了,上传图片和批量上传图片的菜单项,头像是之前上传的
边栏推荐
- GeoGebra 实例 时钟
- Open Oracle server under Linux to allow remote connection
- Which of the top ten securities companies has the lowest Commission and is the safest and most reliable? Do you know anything
- CVPR 2022 oral | NVIDIA proposes an efficient visual transformer network a-vit with adaptive token. The calculation of unimportant tokens can be stopped in advance
- 被困英西中学的师生安全和食物有保障
- How do novices choose the grade of investment and financial products?
- 学习使用php对字符串中的特殊符号进行过滤的方法
- Arbre binaire partie 1
- How does home office manage the data center network infrastructure?
- 413-二叉树基础
猜你喜欢

Yolov6: the fast and accurate target detection framework is open source

队列Queue

LeetCode: 240. Search 2D matrix II

js单例模式

美国电子烟巨头 Juul 遭遇灭顶之灾,所有产品强制下架

411-栈和队列(20. 有效的括号、1047. 删除字符串中的所有相邻重复项、150. 逆波兰表达式求值、239. 滑动窗口最大值、347. 前 K 个高频元素)

Wechat applet learning to achieve list rendering and conditional rendering

CVPR 2022 Oral | 英伟达提出自适应token的高效视觉Transformer网络A-ViT,不重要的token可以提前停止计算

How large and medium-sized enterprises build their own monitoring system

Jcim | AI based protein structure prediction in drug discovery: impacts and challenges
随机推荐
引擎国产化适配&重构笔记
YOLOv6:又快又准的目标检测框架开源啦
SSH Remote Password free login
414-二叉树的递归遍历
分布式 | 如何与 DBLE 进行“秘密通话”
PostgreSQL
SQL Server AVG函数取整问题
LeetCode: 240. Search 2D matrix II
100 GIS practical application cases (XIV) -arcgis attribute connection and using Excel
El table Click to add row style
Cookie encryption 4 RPC method determines cookie encryption
Three ways to use applicationcontextinitializer
js代理模式
简单的价格表样式代码
Development of anti fleeing marketing software for health products
有关二叉树 的基本操作
记录一下MySql update会锁定哪些范围的数据
Record the range of data that MySQL update will lock
416-二叉树(前中后序遍历—迭代法)
买的长期理财产品,可以转短吗?