Vue 使用 TinyMCE 富文本编辑器

Vue 使用 TinyMCE 富文本编辑器前言

说到富文本编辑器，Quill 是 Vue 开发者绕不开的，但遗憾的是，Quill 的 Vue 扩展 vue-quill-editor 在 5 年前停止更新了。

斯人已逝，我们迎来了新的富文本编辑器，TinyMCE！

TinyMCE 官方文档

TinyMCE 中文文档

环境

::: tip TIPvue: 2.6.10

tinymce: 5.4.2

@tinymce/tinymce-vue: 3.2.3

copy-webpack-plugin: 6.1.1:::

实现安装 tinymce 和 @tinymce/tinymce-vueyarn add tinymceyarn add @tinymce/tinymce-vue创建通用富文本组件

这种复用度高的组件，自然是要抽象为公告组件的。

和很多组件包一样，TinyMCE 也是通过一个基础组件和配置参数对象来实现功能的。

// 引入tinyMCE对象import tinymce from "tinymce/tinymce";// 引入编辑器组件import Editor from "@tinymce/tinymce-vue";// 引入主题文件import "tinymce/themes/silver/theme";// 引入皮肤样式import "tinymce/skins/ui/oxide/skin.css";

在默认配置下的 TinyMCE 显得过于简陋了，所以我们要自己引入需要的功能插件包。

需要注意的是，引入和使用在 TinyMCE 中是不同的操作。引入后，不更改工具栏配置，也是使用不了对应功能插件的。

// 编辑器插件plugins//