wangEditor富文本编译器插件学习系列之工具栏配置
作者：老__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工具栏配置内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！