wangEditor富文本編譯器插件學(xué)習(xí)系列之工具欄配置
更新時(shí)間：2023年12月28日 10:13:30 作者：老__L
這篇文章主要給大家介紹了關(guān)于wangEditor富文本編譯器插件學(xué)習(xí)系列之工具欄配置的相關(guān)資料,wangEditor是一款基于原生JavaScript封裝,開源免費(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", // 撤銷
"fullScreen", // 全屏
"enter", // 回車
"bulletedList", // 無序列表
"numberedList", // 有序列表
"insertTable", // 插入表格
"deleteTable", // 刪除表格
"insertTableRow", // 插入行
"deleteTableRow", // 刪除行
"insertTableCol", // 插入列
"deleteTableCol", // 刪除列
"tableHeader", // 表頭
"tableFullWidth", // 寬度自適應(yīng)
"insertVideo", // 插入網(wǎng)絡(luò)視頻
"uploadVideo", // 上傳視頻
"editVideoSize", // 修改視頻尺寸
"uploadImage", // 上傳圖片
"codeSelectLang" // 選擇語言
]
三、重新配置工具欄，顯示哪些菜單，以及菜單的排序、分組
分組可以給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)文章
在子頁面(<iframe></iframe>)創(chuàng)建父級(jí)事件！當(dāng)子頁面(<iframe></iframe>)被銷毀！子頁面(<iframe></iframe>)創(chuàng)建父級(jí)事件也會(huì)被銷毀！2011-01-01
JavaScript 字符串常用操作小結(jié)(非常實(shí)用)
這篇文章主要介紹了JavaScript 字符串常用操作的知識(shí),包括字符串截取，查找類的方法，對(duì)js字符串操作相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-11-11
JS實(shí)現(xiàn)狀態(tài)欄跑馬燈文字效果代碼
這篇文章主要介紹了JS實(shí)現(xiàn)狀態(tài)欄跑馬燈文字效果代碼,涉及JavaScript定時(shí)函數(shù)及流程控制的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
這篇文章主要給大家介紹了關(guān)于ECharts兩種動(dòng)畫效果的相關(guān)資料,在做項(xiàng)目時(shí)當(dāng)我們用到echarts圖表時(shí),大部分產(chǎn)品經(jīng)理都會(huì)要求我們給圖表加上一些動(dòng)畫效果,讓頁面看起來更加炫酷,需要的朋友可以參考下2023-07-07
微信小程序?qū)崿F(xiàn)購物車代碼實(shí)例詳解
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)購物車代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-08-08
D3.js 從P元素的創(chuàng)建開始(顯示可加載數(shù)據(jù))
D3是一個(gè)基于數(shù)據(jù)操作的可視化js庫，認(rèn)識(shí)d3，就從最基礎(chǔ)的顯示可加載數(shù)據(jù)談起,需要的朋友可以參考下2014-10-10
詳解微信小程序input標(biāo)簽正則初體驗(yàn)
這篇文章主要介紹了詳解微信小程序input標(biāo)簽正則初體驗(yàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
JavaScript 對(duì)引擎、運(yùn)行時(shí)、調(diào)用堆棧的概述理解
這篇文章旨在深入挖掘JavaScript，以及向大家解釋JavaScript是如何工作的。非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-10-10
JavaScript JSON數(shù)據(jù)處理全集(小結(jié))
這篇文章主要介紹了JavaScript JSON數(shù)據(jù)處理全集，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
JavaScript實(shí)現(xiàn)刷新不重記的倒計(jì)時(shí)
網(wǎng)上關(guān)于JavaScript實(shí)現(xiàn)倒計(jì)時(shí)的文章有很多，但是一般都是刷新后會(huì)重新開始計(jì)時(shí)，可是我們有的時(shí)候會(huì)需要刷新卻不重新計(jì)算的倒計(jì)時(shí)，這該怎么做呢？下面我們一起來看看這種倒計(jì)時(shí)怎么實(shí)現(xiàn)吧。2016-08-08