当前位置:网站首页>自定义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编辑器的工具栏菜单项
});
});
如下图:只保留了,上传图片和批量上传图片的菜单项,头像是之前上传的
边栏推荐
- Desktop software development framework reward
- NVIDIA's CVPR 2022 oral is on fire! 2D images become realistic 3D objects in seconds! Here comes the virtual jazz band!
- SQL Sever中的窗口函数row_number()rank()dense_rank()
- Error reading CSV (TSV) file
- Graffiti smart brings a variety of heavy smart lighting solutions to the 2022 American International Lighting Exhibition
- Detailed explanation of ThinkPHP 5.0 Model Association
- 引擎国产化适配&重构笔记
- TP5 using post to receive array data times variable type error: solution to array error
- 简单的价格表样式代码
- 学习使用php对字符串中的特殊符号进行过滤的方法
猜你喜欢
Record the range of data that MySQL update will lock
二叉树第一部分
Thinkphp5 multi language switching project practice
Indexeddb local storage, homepage optimization
上升的气泡canvas破碎动画js特效
顶刊TPAMI 2022!基于不同数据模态的行为识别:最新综述
Impdp leading schema message ora-31625 exception handling
机器学习——主成分分析(PCA)
Operator details
英伟达这篇CVPR 2022 Oral火了!2D图像秒变逼真3D物体!虚拟爵士乐队来了!
随机推荐
dedecms模板文件讲解以及首页标签替换
Indexeddb local storage, homepage optimization
Cicflowmeter source code analysis and modification to meet requirements
Wechat applet learning to achieve list rendering and conditional rendering
Network of test and development - Common Service Protocols
顶刊TPAMI 2022!基于不同数据模态的行为识别:最新综述
涂鸦智能携多款重磅智能照明解决方案,亮相2022美国国际照明展
美国电子烟巨头 Juul 遭遇灭顶之灾,所有产品强制下架
port 22: Connection refused
Graffiti smart brings a variety of heavy smart lighting solutions to the 2022 American International Lighting Exhibition
Canvas draw picture
Nvisual digital infrastructure operation management software platform
微信小程序学习之 实现列表渲染和条件渲染.
居家办公如何管理数据中心网络基础设施?
How to standardize data center infrastructure management process
canvas 绘制图片
时尚的弹出模态登录注册窗口
port 22: Connection refused
2022-06-23: given a nonnegative array, select any number to make the maximum cumulative sum a multiple of 7, and return the maximum cumulative sum. N is larger, to the 5th power of 10. From meituan. 3
Engine localization adaptation & Reconstruction notes