wangeditor富文本编辑器拓展菜单——格式刷

参考快速扩展一个菜单 · wangEditor 用户文档

继承 按钮 菜单样式自定义拓展 格式刷功能菜单按钮

const _this = thisconst { $, BtnMenu } = E// 自定义 格式刷 菜单继F承 BtnMenu classclass FormatPainter extends BtnMenu {constructor(editor) {// data-title属性表示当鼠标悬停在该按钮上时提示该按钮的功能简述const $elem = E.$(`<div class="w-e-menu" data-title="格式刷"><i class="el-icon-s-open"></i></div>`)super($elem, editor)}// 菜单点击事件，获取点击格式刷后的下一次点击文本clickHandler() {let nodeArray = []//获取当前选中元素所有父样式function getAllStyle(dom) {if (!dom) returnconst tagName = dom.tagName.toLowerCase()if (tagName === 'p') {nodeArray.push({tagName: 'span',attributes: Array.from(dom.attributes).map((i) => {return {name: i.name,value: i.value,}}),})return nodeArray} else {nodeArray.push({tagName: tagName,attributes: Array.from(dom.attributes).map((i) => {return {name: i.name,value: i.value,}}),})getAllStyle(dom.parentNode)}return nodeArray}//获取鼠标位置的节点let containerEle = this.editor.selection.getSelectionStartElem().elems[0]let brushStyle = getAllStyle(containerEle)if (!!brushStyle) {//有复制到的格式就开启格式刷_this.ifBrushed = !_this.ifBrushed //格式刷开启_this.brushStyle = brushStyle //格式刷样式存储}}// 菜单是否被激活（如果不需要，这个函数可以空着）tryChangeActive() {}}E.registerMenu('FormatPainter', FormatPainter)//监听鼠标抬起事件this.$refs['editor'].addEventListener('mouseup', () => {//延时调用确保富文本编辑器中的选中文本已经该改变setTimeout(() => {this.containerEleChange()})})

/*** @description: 监听文本点击事件* @return void*/containerEleChange() {let containerEle = this.editor.selection.getSelectionContainerElem().elems[0] //选区所在的 DOM 节点let containerEleStart = this.editor.selection.getSelectionStartElem().elems[0] //选区开始的 DOM 节点let containerEleEnd = this.editor.selection.getSelectionEndElem().elems[0] //选区结束的 DOM 节点let ifEmpty = this.editor.selection.isSelectionEmpty() //判断选区是否为“空”（即没有选中任何文字）let containerText = this.editor.selection.getSelectionText() //选中的文字//复制style到选中的文本function addStyle(text, nodeArray) {let currentNode = nullnodeArray.forEach((ele, index) => {let node = document.createElement(ele.tagName)for (const attr of ele.attributes) {node.setAttribute(attr.name, attr.value)}if (index === 0) {node.innerText = textcurrentNode = node} else {node.appendChild(currentNode)currentNode = node}})return currentNode}if (this.ifBrushed) {// 格式刷开启则开始复制stylelet containerEleNewlet containerEleTextif (ifEmpty) {//判断选区是否为“空”（即没有选中任何文字）containerEleText = containerEle.innerTextcontainerEleNew = addStyle(containerEle.innerText, this.brushStyle) //新的样式} else {//选中一段文字containerEleText = containerTextcontainerEleNew = addStyle(containerText, this.brushStyle) //新的样式}if (containerEleStart === containerEleEnd) {//选区前后相等，选中的区域中间不夹杂其他标签let innerText = containerEle.innerTextif (ifEmpty) {// 没有选中的文本直接全部替换掉containerEle.innerHTML = containerEleNew.innerHTML} else {//有选中的文本则替换选中的文本containerEle.innerHTML = innerText.replace(containerEleText,containerEleNew.innerHTML)}} else {//选区前后不相等，选中的区域中间夹杂其他标签,操作和选区为“空”一样containerEleNew = addStyle(containerEle.innerText, this.brushStyle) //新的样式containerEle.innerHTML = containerEleNew.innerHTML}}this.ifBrushed = false},

//清除监听beforeDestroy() {this.$refs['editor'].removeEventListener('click', this.containerEleChange)},