wangEditor富文本编译器插件学习系列之工具栏配置
更新时间：2023年12月28日 10:13:30 作者：老__L
这篇文章主要给大家介绍了关于wangEditor富文本编译器插件学习系列之工具栏配置的相关资料,wangEditor是一款基于原生JavaScript封装,开源免费的富文本编辑器,支持常规的文字排版操作、插入图片、插入视频、插入代码等功能,需要的朋友可以参考下
一、查看工具栏的默认配置
import { DomEditor } from "@wangeditor/editor";
...
const toolbar = DomEditor.getToolbar(this.editor);
const curToolbarConfig = toolbar.getConfig();
console.log(curToolbarConfig);
mode为default
{
"toolbarKeys": [
"headerSelect",
"blockquote",
"|",
"bold",
"underline",
"italic",
{
"key": "group-more-style",
"title": "更多",
"iconSvg": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M204.8 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z\"></path><path d=\"M505.6 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z\"></path><path d=\"M806.4 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z\"></path></svg>",
"menuKeys": [
"through",
"code",
"sup",
"sub",
"clearStyle"
]
},
"color",
"bgColor",
"|",
"fontSize",
"fontFamily",
"lineHeight",
"|",
"bulletedList",
"numberedList",
"todo",
{
"key": "group-justify",
"title": "对齐",
"iconSvg": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M768 793.6v102.4H51.2v-102.4h716.8z m204.8-230.4v102.4H51.2v-102.4h921.6z m-204.8-230.4v102.4H51.2v-102.4h716.8zM972.8 102.4v102.4H51.2V102.4h921.6z\"></path></svg>",
"menuKeys": [
"justifyLeft",
"justifyRight",
"justifyCenter",
"justifyJustify"
]
},
{
"key": "group-indent",
"title": "缩进",
"iconSvg": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M0 64h1024v128H0z m384 192h640v128H384z m0 192h640v128H384z m0 192h640v128H384zM0 832h1024v128H0z m0-128V320l256 192z\"></path></svg>",
"menuKeys": [
"indent",
"delIndent"
]
},
"|",
"emotion",
"insertLink",
{
"key": "group-image",
"title": "图片",
"iconSvg": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M959.877 128l0.123 0.123v767.775l-0.123 0.122H64.102l-0.122-0.122V128.123l0.122-0.123h895.775zM960 64H64C28.795 64 0 92.795 0 128v768c0 35.205 28.795 64 64 64h896c35.205 0 64-28.795 64-64V128c0-35.205-28.795-64-64-64zM832 288.01c0 53.023-42.988 96.01-96.01 96.01s-96.01-42.987-96.01-96.01S682.967 192 735.99 192 832 234.988 832 288.01zM896 832H128V704l224.01-384 256 320h64l224.01-192z\"></path></svg>",
"menuKeys": [
"insertImage",
"uploadImage"
]
},
{
"key": "group-video",
"title": "视频",
"iconSvg": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M981.184 160.096C837.568 139.456 678.848 128 512 128S186.432 139.456 42.816 160.096C15.296 267.808 0 386.848 0 512s15.264 244.16 42.816 351.904C186.464 884.544 345.152 896 512 896s325.568-11.456 469.184-32.096C1008.704 756.192 1024 637.152 1024 512s-15.264-244.16-42.816-351.904zM384 704V320l320 192-320 192z\"></path></svg>",
"menuKeys": [
"insertVideo",
"uploadVideo"
]
},
"insertTable",
"codeBlock",
"divider",
"|",
"undo",
"redo",
"|",
"fullScreen"
],
"excludeKeys": [],
"insertKeys": {
"index": 0,
"keys": []
},
"modalAppendToBody": false
}
mode为simple
{
"toolbarKeys": [
"blockquote",
"header1",
"header2",
"header3",
"|",
"bold",
"underline",
"italic",
"through",
"color",
"bgColor",
"clearStyle",
"|",
"bulletedList",
"numberedList",
"todo",
"justifyLeft",
"justifyRight",
"justifyCenter",
"|",
"insertLink",
{
"key": "group-image",
"title": "图片",
"iconSvg": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M959.877 128l0.123 0.123v767.775l-0.123 0.122H64.102l-0.122-0.122V128.123l0.122-0.123h895.775zM960 64H64C28.795 64 0 92.795 0 128v768c0 35.205 28.795 64 64 64h896c35.205 0 64-28.795 64-64V128c0-35.205-28.795-64-64-64zM832 288.01c0 53.023-42.988 96.01-96.01 96.01s-96.01-42.987-96.01-96.01S682.967 192 735.99 192 832 234.988 832 288.01zM896 832H128V704l224.01-384 256 320h64l224.01-192z\"></path></svg>",
"menuKeys": [
"insertImage",
"uploadImage"
]
},
"insertVideo",
"insertTable",
"codeBlock",
"|",
"undo",
"redo",
"|",
"fullScreen"
],
"excludeKeys": [],
"insertKeys": {
"index": 0,
"keys": []
},
"modalAppendToBody": false
}
下方分别介绍对面得四个属性
二、查询编辑器注册的所有菜单 key （可能有的不在工具栏上）
const allMenuKeys = this.editor.getAllMenuKeys(); console.log(allMenuKeys);
结果如下
[
"bold", // 粗体
"underline", // 下划线
"italic", // 斜体
"through", // 删除线
"code", // 行内代码
"sub", // 下标
"sup", // 上标
"clearStyle", // 清除格式
"color", // 字体颜色
"bgColor", // 背景色
"fontSize", // 字号
"fontFamily", // 字体
"indent", // 增加缩进
"delIndent", // 减少缩进
"justifyLeft", // 左对齐
"justifyRight", // 右对齐
"justifyCenter", // 居中对齐
"justifyJustify", // 两端对齐
"lineHeight", // 行高
"insertImage", // 网络图片
"deleteImage", // 删除图片
"editImage", // 编辑图片
"viewImageLink", // 查看链接
"imageWidth30", // 图片宽度相对于编辑器宽度的百分比30
"imageWidth50", // 图片宽度相对于编辑器宽度的百分比50
"imageWidth100", // 图片宽度相对于编辑器宽度的百分比100
"divider", // 分割线
"emotion", // 表情
"insertLink", // 插入链接
"editLink", // 修改链接
"unLink", // 取消链接
"viewLink", // 查看链接
"codeBlock", // 代码块
"blockquote", // 引用
"headerSelect", // 标题
"header1", // 标题1
"header2", // 标题2
"header3", // 标题3
"header4", // 标题4
"header5", // 标题5
"todo", // 待办
"redo", // 重做
"undo", // 撤销
"fullScreen", // 全屏
"enter", // 回车
"bulletedList", // 无序列表
"numberedList", // 有序列表
"insertTable", // 插入表格
"deleteTable", // 删除表格
"insertTableRow", // 插入行
"deleteTableRow", // 删除行
"insertTableCol", // 插入列
"deleteTableCol", // 删除列
"tableHeader", // 表头
"tableFullWidth", // 宽度自适应
"insertVideo", // 插入网络视频
"uploadVideo", // 上传视频
"editVideoSize", // 修改视频尺寸
"uploadImage", // 上传图片
"codeSelectLang" // 选择语言
]
三、重新配置工具栏，显示哪些菜单，以及菜单的排序、分组
分组可以给key设置 |
toolbarConfig: {
toolbarKeys: ["bold"]
}
四、在当前 toolbarKeys 的基础上继续插入新菜单，如自定义扩展的菜单
toolbarConfig: {
insertKeys: {
index: 1, // 插入的位置，基于当前的 toolbarKeys
keys: ["headerSelect", "italic"]
}
}
五、想排除掉某些菜单，其他都保留
toolbarConfig: {
excludeKeys: ["italic"]
}
斜体就不在工具栏展现了
六、将菜单弹出的 modal 添加到 body 下
toolbarConfig: {
modalAppendToBody: true
}总结
到此这篇关于wangEditor富文本编译器插件学习系列之工具栏配置的文章就介绍到这了,更多相关wangEditor工具栏配置内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
在子页面(<iframe></iframe>)创建父级事件！当子页面(<iframe></iframe>)被销毁！子页面(<iframe></iframe>)创建父级事件也会被销毁！2011-01-01
这篇文章主要介绍了JavaScript 字符串常用操作的知识,包括字符串截取，查找类的方法，对js字符串操作相关知识感兴趣的朋友一起学习吧2016-11-11
这篇文章主要介绍了JS实现状态栏跑马灯文字效果代码,涉及JavaScript定时函数及流程控制的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-10-10
这篇文章主要给大家介绍了关于ECharts两种动画效果的相关资料,在做项目时当我们用到echarts图表时,大部分产品经理都会要求我们给图表加上一些动画效果,让页面看起来更加炫酷,需要的朋友可以参考下2023-07-07
这篇文章主要介绍了微信小程序实现购物车代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-08-08
D3是一个基于数据操作的可视化js库，认识d3，就从最基础的显示可加载数据谈起,需要的朋友可以参考下2014-10-10
这篇文章主要介绍了详解微信小程序input标签正则初体验，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
这篇文章旨在深入挖掘JavaScript，以及向大家解释JavaScript是如何工作的。非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-10-10
这篇文章主要介绍了JavaScript JSON数据处理全集，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
网上关于JavaScript实现倒计时的文章有很多，但是一般都是刷新后会重新开始计时，可是我们有的时候会需要刷新却不重新计算的倒计时，这该怎么做呢？下面我们一起来看看这种倒计时怎么实现吧。2016-08-08
最新评论