wangEditor富文本編譯器插件學(xué)習(xí)系列之工具欄配置
更新時(shí)間：2023年12月28日 10:13:30 作者：老__L
這篇文章主要給大家介紹了關(guān)于wangEditor富文本編譯器插件學(xué)習(xí)系列之工具欄配置的相關(guān)資料,wangEditor是一款基于原生JavaScript封裝,開(kāi)源免費(fèi)的富文本編輯器,支持常規(guī)的文字排版操作、插入圖片、插入視頻、插入代碼等功能,需要的朋友可以參考下
一、查看工具欄的默認(rèn)配置
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": "對(duì)齊",
"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": "縮進(jìn)",
"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
}
下方分別介紹對(duì)面得四個(gè)屬性
二、查詢編輯器注冊(cè)的所有菜單 key （可能有的不在工具欄上）
const allMenuKeys = this.editor.getAllMenuKeys(); console.log(allMenuKeys);
結(jié)果如下
[
"bold", // 粗體
"underline", // 下劃線
"italic", // 斜體
"through", // 刪除線
"code", // 行內(nèi)代碼
"sub", // 下標(biāo)
"sup", // 上標(biāo)
"clearStyle", // 清除格式
"color", // 字體顏色
"bgColor", // 背景色
"fontSize", // 字號(hào)
"fontFamily", // 字體
"indent", // 增加縮進(jìn)
"delIndent", // 減少縮進(jìn)
"justifyLeft", // 左對(duì)齊
"justifyRight", // 右對(duì)齊
"justifyCenter", // 居中對(duì)齊
"justifyJustify", // 兩端對(duì)齊
"lineHeight", // 行高
"insertImage", // 網(wǎng)絡(luò)圖片
"deleteImage", // 刪除圖片
"editImage", // 編輯圖片
"viewImageLink", // 查看鏈接
"imageWidth30", // 圖片寬度相對(duì)于編輯器寬度的百分比30
"imageWidth50", // 圖片寬度相對(duì)于編輯器寬度的百分比50
"imageWidth100", // 圖片寬度相對(duì)于編輯器寬度的百分比100
"divider", // 分割線
"emotion", // 表情
"insertLink", // 插入鏈接
"editLink", // 修改鏈接
"unLink", // 取消鏈接
"viewLink", // 查看鏈接
"codeBlock", // 代碼塊
"blockquote", // 引用
"headerSelect", // 標(biāo)題
"header1", // 標(biāo)題1
"header2", // 標(biāo)題2
"header3", // 標(biāo)題3
"header4", // 標(biāo)題4
"header5", // 標(biāo)題5
"todo", // 待辦
"redo", // 重做
"undo", // 撤銷(xiāo)
"fullScreen", // 全屏
"enter", // 回車(chē)
"bulletedList", // 無(wú)序列表
"numberedList", // 有序列表
"insertTable", // 插入表格
"deleteTable", // 刪除表格
"insertTableRow", // 插入行
"deleteTableRow", // 刪除行
"insertTableCol", // 插入列
"deleteTableCol", // 刪除列
"tableHeader", // 表頭
"tableFullWidth", // 寬度自適應(yīng)
"insertVideo", // 插入網(wǎng)絡(luò)視頻
"uploadVideo", // 上傳視頻
"editVideoSize", // 修改視頻尺寸
"uploadImage", // 上傳圖片
"codeSelectLang" // 選擇語(yǔ)言
]
三、重新配置工具欄，顯示哪些菜單，以及菜單的排序、分組
分組可以給key設(shè)置 |
toolbarConfig: {
toolbarKeys: ["bold"]
}
四、在當(dāng)前 toolbarKeys 的基礎(chǔ)上繼續(xù)插入新菜單，如自定義擴(kuò)展的菜單
toolbarConfig: {
insertKeys: {
index: 1, // 插入的位置，基于當(dāng)前的 toolbarKeys
keys: ["headerSelect", "italic"]
}
}
五、想排除掉某些菜單，其他都保留
toolbarConfig: {
excludeKeys: ["italic"]
}
斜體就不在工具欄展現(xiàn)了
六、將菜單彈出的 modal 添加到 body 下
toolbarConfig: {
modalAppendToBody: true
}總結(jié)
到此這篇關(guān)于wangEditor富文本編譯器插件學(xué)習(xí)系列之工具欄配置的文章就介紹到這了,更多相關(guān)wangEditor工具欄配置內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
經(jīng)典面試題之JavaScript?for循環(huán)(var?let)
如果你也在面試找工作,那么也一定遇到過(guò)這道for循環(huán)打印結(jié)果的題,下面我們來(lái)探討下,對(duì)經(jīng)典面試題之js?for循環(huán)相關(guān)知識(shí)感興趣的朋友跟隨小編一起看看吧2023-10-10
HTML+CSS+JavaScript實(shí)現(xiàn)可拖拽模態(tài)框
這篇文章主要為大家詳細(xì)介紹了HTML+CSS+JavaScript實(shí)現(xiàn)可拖拽模態(tài)框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
JS中async/await實(shí)現(xiàn)異步調(diào)用的方法
這篇文章主要介紹了async/await實(shí)現(xiàn)異步調(diào)用的方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08
Three.js實(shí)現(xiàn)3D乒乓球小游戲(物理效果)
本文將使用React Three Fiber 和 Cannon.js 來(lái)實(shí)現(xiàn)一個(gè)具有物理特性的乒乓球小游戲，使用 React Three Fiber 搭建基礎(chǔ)三維場(chǎng)景、如何使用新技術(shù)棧給場(chǎng)景中對(duì)象的添加物理特性等，最后利用上述知識(shí)點(diǎn)，將開(kāi)發(fā)一個(gè)簡(jiǎn)單的乒乓球小游戲,需要的朋友可以參考下2023-03-03
這篇文章主要介紹了JS實(shí)現(xiàn)仿微信支付彈窗功能,代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-06-06
JS數(shù)組在內(nèi)存中的效率問(wèn)題淺析
用js有很久了,但都沒(méi)有深究過(guò)js的數(shù)組形式,下面這篇文章主要給大家介紹了關(guān)于JS數(shù)組在內(nèi)存中的效率問(wèn)題,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-02-02
RGB轉(zhuǎn)換實(shí)現(xiàn)代碼，淘寶前端開(kāi)發(fā)工程師筆試題
寫(xiě)一個(gè)轉(zhuǎn)換RGB的值的函數(shù)，實(shí)現(xiàn)以下效果。2010-11-11
JavaScript中的atob和btoa函數(shù)及base64編碼解碼詳解
在JavaScript中btoa和atob是兩個(gè)處理Base64編碼的全局函數(shù),它們通常用于在瀏覽器環(huán)境中對(duì)二進(jìn)制數(shù)據(jù)進(jìn)行編碼和解碼,這篇文章主要介紹了JavaScript中atob和btoa函數(shù)及base64編碼解碼的相關(guān)資料,需要的朋友可以參考下2025-04-04
這篇文章主要給大家介紹了關(guān)于js回文數(shù)的4種判斷方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用js具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
JS關(guān)于for循環(huán)中使用setTimeout的四種解決方案
這篇文章主要介紹了JS關(guān)于for循環(huán)中使用setTimeout的四種解決方案，想深入了解JS的同學(xué)，一定要看下2021-05-05