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工具栏配置内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
经典面试题之JavaScript for循环(var let)
如果你也在面试找工作,那么也一定遇到过这道for循环打印结果的题,下面我们来探讨下,对经典面试题之js for循环相关知识感兴趣的朋友跟随小编一起看看吧2023-10-10
这篇文章主要为大家详细介绍了HTML+CSS+JavaScript实现可拖拽模态框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要介绍了async/await实现异步调用的方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-08-08
本文将使用React Three Fiber 和 Cannon.js 来实现一个具有物理特性的乒乓球小游戏，使用 React Three Fiber 搭建基础三维场景、如何使用新技术栈给场景中对象的添加物理特性等，最后利用上述知识点，将开发一个简单的乒乓球小游戏,需要的朋友可以参考下2023-03-03
这篇文章主要介绍了JS实现仿微信支付弹窗功能,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-06-06
用js有很久了,但都没有深究过js的数组形式,下面这篇文章主要给大家介绍了关于JS数组在内存中的效率问题,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-02-02
写一个转换RGB的值的函数，实现以下效果。2010-11-11
JavaScript中的atob和btoa函数及base64编码解码详解
在JavaScript中btoa和atob是两个处理Base64编码的全局函数,它们通常用于在浏览器环境中对二进制数据进行编码和解码,这篇文章主要介绍了JavaScript中atob和btoa函数及base64编码解码的相关资料,需要的朋友可以参考下2025-04-04
这篇文章主要给大家介绍了关于js回文数的4种判断方法，文中通过示例代码介绍的非常详细，对大家学习或者使用js具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-06-06
这篇文章主要介绍了JS关于for循环中使用setTimeout的四种解决方案，想深入了解JS的同学，一定要看下2021-05-05
最新评论