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

最新推荐文章于 2024-05-07 15:56:26 发布

传说中的小霸王97

最新推荐文章于 2024-05-07 15:56:26 发布

阅读量2.1k

点赞数 10

文章标签：前端

本文链接：https://blog.youkuaiyun.com/weixin_43985618/article/details/135976192

版权

本文介绍了如何在Wangeditor中自定义工具栏，特别是添加公式按钮，包括定义菜单类、工厂方法和注册监听事件，以及为何推荐Wangeditor作为首选富文本编辑器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、wangeditor自定义工具栏

前言

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

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

1、定义公式按钮菜单 class

class FormulaMenu {
    constructor() {
                    this.title = '添加公式' // 自定义菜单标题
                    this.iconSvg = `你要显示按钮的svg代码` // 可选
                    this.tag = '