vue中使用富文本编辑器

2021-09-01

前端使用富文本编辑器的插件有很多，今天献上wangeditor的使用教程，教你如何在vue中使用富文本编辑器
先敬上官网：http://www.wangeditor.com/index.html
【vue中使用富文本编辑器】wangeditor是一个萌新富文本编辑器，基于js和css，重点在于它轻量，如果你需要的功能不是很复杂，那么选它没错了，刚好能满足你！
第一步：先保证你的电脑中安装有node，当然使用cdn也可以，下载到本地也行，我这里用的vue-cli，顺便下载到项目依赖中了
本地下载：

https://github.com/wangfupeng1988/wangEditor/releases

cdn使用：

https://unpkg.com/wangeditor/release/wangEditor.min.js

node下载：

npm i wangeditor -S

第二步：在项目中引入该插件并定义html结构，我这里使用vue脚手架，没有使用脚手架和其他构建工具的同学可以使用script标签对插件进行引用
例如：

vue-cli中使用：先建立模板，然后引入插件，创建即可，可以对菜单进行配置，也可以对编辑器中的内容进行实时监听

以上内容就可以实现vue中简单使用富文本编辑器的功能了，更多介绍请参考官网

推荐阅读

上一篇：王胖子的旧书店

下一篇：永远不一样的米饭