Vue<富文本编辑器>

效果图：

image.png

此处介绍一个好用的 Tinymce 富文本编辑器，也是 vue-element-admin
后台管理项目中所用到的。（都有现成的了，不妨拿来用）

image.png

image.png

点击查看 vue-element-admin 富文本功能介绍
点击查看 Tinymce 中文文档

文件下载：

此处给大家看一下使用到的文件目录

image.png

上面就是封装好的富文本组件，你也可以 点击这里去下载 相应的文件目录，不过还是建议全部下载下来，把对应的组件拿出来用比较好。（还有很多别的组件也很好用呢，也可以偷来用 ）

image.png

图片上传：

外部图片插入：这里提一下图片插入这块，每次插入的时候，你需要备注图片的在线地址，输入完之后，就会插入到编辑器中。

image.png

本地图片插入：如果想插入本地图片，你需要点击右上角的上传，然后配合自己后端的接口，上传本地图片到服务端，并生成一个在线图片地址，以便插入到编辑器中，这样你最终传给后端的就是一个 的图片标签了。

image.png

下面文件标注的地方就是，上传图片的组件模块，这里面你可以根据自身需求进行调整

image.png

使用代码：