最近接手的项目中, 部分页面需要使用富文本编辑器, 对比了几款web富文本编辑器后, 综合兼容性和简洁性,最终我选择了 summernote, 详情见官方github地址 github–summernote本项目基于 vue2.0 , 使用 vue-cli 脚手架的 webpack 模板搭建, 整体项目目录如下:
![](https://pic4.zhimg.com/v2-b8a7a0d6cd0f06eec75982abbd57135b_b.png)
以下是具体使用 summernote 的流程:1. 在 package.json 文件中添加所需的依赖库,然后执行 npm install 安装这些库
![](https://pic4.zhimg.com/v2-dea5e40b43f609df31890ce283e0d883_b.png)
2. 在 src / main.js 文件中导入下列库文件
![](https://pic4.zhimg.com/v2-9c5680774952a3a54f234664afecfd2f_b.png)
3. 由于summernote 使用 jQuery 库, 我们在组件里需要导入 jQuery才能使用, 为了方便起见,我们在 build / webpack.base.conf.js文件中的 resolve配置项 中添加一个 alias 指向jquery路径
![](https://pic4.zhimg.com/v2-a2b091e3bebdbb9f58d57722b8e3c4f3_b.png)
4. 在vue组件中引入元素
![](https://pic4.zhimg.com/v2-03b1386ccece9455459b488a4f77902b_b.png)
5. 在vue组件的 mounted 生命周期钩子中初始化summernote
![](https://pic3.zhimg.com/v2-f77f7cec60fe788c6ebe97eef7c1760e_b.png)
6. 自定义上传图片的方法, 收到图片地址 url 后插入到富文本编辑器
![](https://pic4.zhimg.com/v2-c393a37f130ccaa02c27bb6bf41ab4af_b.png)
自定义的网络 API 文件如下:关于获取七牛token的后台接口实现,参考本专栏上一篇文章使用Element UI框架(基于vue2.0)的upload组件上传图片至七牛云
![](https://pic2.zhimg.com/v2-7fca565905dd5f87b3aaf15052394b19_b.png)
7. 最终实现效果如下:
![](https://pic4.zhimg.com/v2-4df44a4927396ff9d02a44ec048826e3_b.png)