当前位置:网站首页>自定义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编辑器的工具栏菜单项
});
});
如下图:只保留了,上传图片和批量上传图片的菜单项,头像是之前上传的
边栏推荐
- Thinkphp5 clear the cache cache, temp cache and log cache under runtime
- Symbol. Iterator iterator
- Go language development environment setup +goland configuration under the latest Windows
- El table Click to add row style
- Honeypot 2 hfish, ehoney
- el-table表格的拖拽 sortablejs
- 解决微信小程序rich-text富文本标签内部图片宽高自适应的方法
- 十大证券公司哪个佣金最低,最安全可靠?有知道的吗
- [input method] so far, there are so many Chinese character input methods!
- js单例模式
猜你喜欢
物联网?快来看 Arduino 上云啦
How to standardize data center infrastructure management process
Top issue tpami 2022! Behavior recognition based on different data modes: a recent review
小程序学习之获取用户信息(getUserProfile and getUserInfo)
2021-08-17
About thinkphp5, use the model save() to update the data prompt method not exist:think\db\query- & gt; Error reporting solution
canvas管道动画js特效
ByteDance Interviewer: talk about the principle of audio and video synchronization. Can audio and video be absolutely synchronized?
Development of anti fleeing marketing software for health products
SSH Remote Password free login
随机推荐
port 22: Connection refused
Internet of things? Come and see Arduino on the cloud
Can the long-term financial products you buy be shortened?
被困英西中学的师生安全和食物有保障
为什么 JSX 语法这么香?
Detailed explanation of ThinkPHP 5.0 Model Association
Regular matching mobile number
SQL sever基本数据类型详解
p5.js千纸鹤动画背景js特效
[input method] so far, there are so many Chinese character input methods!
Geogebra instance clock
生产者/消费者模型
美国电子烟巨头 Juul 遭遇灭顶之灾,所有产品强制下架
Queue queue
Symbol.iterator 迭代器
SQL Sever中的窗口函数row_number()rank()dense_rank()
Array seamless scrolling demo
linux下oracle服务器打开允许远程连接
操作符详解
el-table点击添加行样式