富文本编辑器wangeditor自定义工具栏按钮

一、wangeditor自定义工具栏

前言

由于市面上有很多编辑器 ，但是最终总结下来**wangeditor和CKeditor功能相对强大，但是CKeditor首先API文档不友好,全是英文文档，并且很多高级功能都需要付费才能使用，二次开发不友好，但是值得一提的是CKeditor**的确是很强大，里面几乎涵盖了富文本编辑器的大多数功能，还引入了AI，虽然有点智障。

所以综上所述，**wangeditor**无疑是最好的选择，以下就是记录自定义编辑器工具栏的功能开发。

1、定义公式按钮菜单 class

class FormulaMenu {
    constructor() {
                    this.title = '添加公式' // 自定义菜单标题
                    this.iconSvg = `你要显示按钮的svg代码` // 可选
                    this.tag = 'button'
    }
    // 获取菜单执行时的 value ，用不到则返回空 字符串或 false
    getValue(editor) {
                    return ''
    }
    // 菜单是否需要激活（如选中加粗文本，“加粗”菜单会激活），用不到则返回 false
    isActive(editor) {
                    return false
    }
    // 菜单是否需要禁用（如选中 H1 ，“引用”菜单被禁用），用不到则返回 false
    isDisabled(editor) {
                    return false
    }
    // 点击菜单时触发的函数
    exec(editor, value) {
        if (this.isDisabled(editor)) return
        //如果此时需要载入固定格式的文字，则在此处使用编辑器插入html方法
        // editor.insertText(value) // value 
        //如果以上方法无法满足你的需求的话，则采用触发事件的形式。
        editor.emit("formulaClick")
    }

}

const latex = {
	key: 'latex', // 定义 menu key ：要保证唯一、不重复（重要）
	factory() {
		return new FormulaMenu()
	},
}
const latex1 = {
	key: 'menukey', // 定义 menu key ：要保证唯一、不重复（重要）
	factory() {
		return new YourClassName()
	},
}
const module = {
	menus: [latex, latex1],
}
Boot.registerModule(module)

2、注册监听事件formulaClick

注意：此处的监听事件应该写在wangeditor中的@onCreated="handleCreated"事件方法中；

handleCreated(editor) {
	this.editorRef = editor // 记录 editor 实例，重要！
	// 监听事件
	editor.on('formulaClick', () => {
		// 编写你自己的代码逻辑
		// 最后使用以下方法插入html
		// 在官网中有这两个方法的说明，在此就不做说明
		// 此处的html变量是要插入的html代码
		// this.editorRef.setHtml(html);
		// this.editorRef.dangerouslyInsertHtml(html)
	});
},