Vue后台管理项目 --- 富文本编辑器篇

前言：文章参考自：在 Vue 项目中引入 tinymce 富文本编辑器 - Wise.Wrong - 博客园， 作者说的很详细，感谢！

1. 做后台管理项目避免不了会有富文本编辑器功能,综合我查过的所有富文本编辑器，最终选定了Tinymce编辑器

2. 官网：TinyMCE | The Most Advanced WYSIWYG HTML Editor

3. 下载：npm install @tinymce/tinymce-vue -S

               npm install tinymce -S

4. 安装之后，在 node_modules 中找到 tinymce/skins 目录，然后将 skins 目录拷贝到 static 目录下，tinymce 默认是英文界面，所以还需要下载一个汉化包：TinyMCE | Language Packages，然后将这个语言包放到 static 目录下，如:

    

我在外面包裹了一个叫Tinymce文件夹

5. 我们可以把这个富文本编辑器抽成一个组件，既方便使用，又好维护，基本按照前言作者文章应该就差不多了，最后因为抽成独立组件，我们要把富文本里面的内容传递给父组件，可以按照父子组件传递信息的方式，如：

6. 最后贴一下完整代码：