自定义wangEditor5富文本编辑器拓展菜单——格式刷【vue3】

使用前须知：

本次的代码演示中的vue为3.2以上版本，在你所使用的项目中的package.json中是否存在一下这两个依赖包。且wangeditor/editor版本应大于5~

"@wangeditor/editor": "^5.1.18",
 "@wangeditor/editor-for-vue": "^5.0.2"

1、wangEditor5富文本编辑器拓展菜单——格式刷使用效果图：

2、用户使用步骤说明：

2-1、使用鼠标左键选中需要复刻的文字格式上

2-2、点击格式刷菜单

2-3、再次使用鼠标左键选中需要被复刻格式的文字

2-4、松开鼠标左键即可

tips:此时如果继续重复2-3与2-4的操作会继续实现格式刷效果，若要移除格式刷效果，再次点击菜单栏中的格式刷即可移除格式刷选中状态

3、封装格式刷JS插件：

import { createEditor } from '@wangeditor/editor';

export default class FormatPaint {
	constructor() {
        this.title = '格式刷' // 定义菜单栏标题
        // this.iconSvg = '<svg>...</svg>'//自定义菜单中格式化刷的图标
        // 这个图标自己去iconFont网站去搜索格式刷然后下载svg图标，使用svg中的代码粘贴到这里即可
        this.tag = 'button'
        if(!FormatPaint.prototype.init){
            FormatPaint.prototype.attrs = {
                isSelect:false,
                formatJson:{},
                formatedHtml:''
            };
            FormatPaint.prototype.init = true;
        }
    }
    getValue(editor) {                           // JS 语法
        return ''
    }

    // 菜单是否需要激活（比如选择加粗文本，“加粗”菜单会被激活），用不到会返回 false
    isActive(editor) {         
        return this.attrs.isSelect;
    }

    // 菜单是否需要禁用（比如选中 H1 ，“引用”菜单被禁用），用不到会返回 false
    isDisabled(editor) {                     // JS 语法
        return false
    }

    // 点击菜单时触发的函数
    exec(editor, value) {    
        if (this.isDisabled(editor)) return 
        const select = editor.getFragment()[0].children[0];
        if(!this.attrs.isSelect&&select.text.length){
            this.attrs.formatJson = {...select};
            this.attrs.isSelect = true;
        }else{
            editor.getSelectionText() 
            this.attrs.isSelect = false;
        }  
        editor.blur()
        editor.focus()                       // JS 语法
    }
    //设置格式化好的内容
    setFormatHtml(editor){
        if(!this.attrs.formatedHtml.length) return;
        editor.dangerouslyInsertHtml(this.attrs.formatedHtml)
        this.attrs.formatedHtml = ''
    }
}


export function withSelect(editor) {  
   const myFormatPaint =  new FormatPaint ;

    const { onChange,onBlur,onFocus} = editor // 获取当前 editor API
    const newEditor = editor

    
    newEditor.onChange = (editor)=>{
        onChange();
        if(myFormatPaint.attrs.isSelect){
            myFormatPaint.attrs.formatJson.text = newEditor.getSelectionText()
                const _editor = createEditor({
                    content: [myFormatPaint.attrs.formatJson]
                })
                myFormatPaint.attrs.formatedHtml = _editor.getHtml();
                if(!document.onmouseup){
                    document.onmouseup=()=>{
                        if(!myFormatPaint.attrs.formatedHtml.length) return;
                        myFormatPaint.setFormatHtml(newEditor)
                        document.onmouseup = null
                    }
              }
        }
        return;
    }
    return newEditor
}

4、格式刷在公共性的vue组件中的使用：

<script setup>
import FormatPaint, { withSelect } from './wangeditorGeShiShua.js'
import { Boot } from '@wangeditor/editor'

//获取当前时间戳
const timestamp = Date.now()
// 生成一个随机数
const randomNum = Math.floor(Math.random() * 1000000) // 生成一个0到999999之间的随机数
// 将时间戳和随机数组合成一个字符串作为格式刷key
let geShiShuaKey = `${timestamp}-${randomNum}`
const FormatPaintMenuConf = {
  key: geShiShuaKey, // 定义 menu key ：要保证唯一、不重复（重要）
  factory() {
    return new FormatPaint() // 把 `YourMenuClass` 替换为你菜单的 class
  }
}
Boot.registerMenu(FormatPaintMenuConf)
Boot.registerPlugin(withSelect)


const toolbarConfig = {
  ...
  //格式刷注册key
  insertKeys: {
    index: 0, // 插入的位置，基于当前的 toolbarKeys
    keys: [geShiShuaKey]
  },
  ...

}
</script>