VUE-QUILL-EDITOR 基于 QUILL、适用于 VUE 的富文本编辑器，支持服务端渲染和单页应用，非常高效简洁。
在全局中引入
在指定的 vue 文件中引入
到这里一个默认的富文本编辑器已经导入使用了，如下图所视！
一般的，我们在使用的时候并不需要这么多功能，可以适当的对编辑器配置项进行配置。
可以根据自己的实际需求，保留相应的工具栏。
vue-quill-editor 默认的是以 base64 保存图片，会直接把图片 base64 和内容文本一起以字符串的形式提交到后端。这样小图片还行，如果要上传大图片会提示上传失败，优秀的前端打字员显然不会这样做。
思路
- 可以先将图片上传至服务器，再将图片链接插入到富文本中显示
- 图片上传可以自定义一个组件或者使用 iview 的上传图片的组件（我在项目中使用的是自定义的组件，这里演示使用 iview 组件上传）
- 上传图片的组件需要隐藏，点击图片上传时调用 iview 的图片上传，上传成功后返回图片链接。
-
HTML:
这样就完成了图片上传的功能。CSS:
JS:
1.在原本的quill-editor能正常使用的情况下，安装quill-image-drop-module和quill-image-resize-module
2.我是在全局注册的quill-editor，在main.js中加入以下代码
3.在 editorOption 中添加配置 在modules中与 history/toolbar平级
4.在项目文件 vue.config.js 加上配置。（这一步很重要，如果不配置会报错！）
这样就导入完成了，如下图所示
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/166478.html