在工作中遇到一个需要使用富文本编辑器的场景，当时经过考虑使用了 vue-quill-editor (基于 Quill、适用于 Vue 的富文本编辑器，支持服务端渲染和单页应用。) 当时自己也没做富文本编辑器的经验，在上传图片的时候就遇到了一个坑:
通过使用富文本编辑的上传图片后其实是 base64 的图片，图片稍微大点，就是很长很长一串url。提交给后端时图片地址长度就超过了限制。
为了解决这个问题，就二次封装了下 vue-quill-editor，将图片上传到了七牛云。
讯享网
一般来说富文本样式都会根据具体 ui 再次重写的。
讯享网
点击查看源码
- 上传图片的地址 uploadUrl，默认是七牛云地址
- 上传图片的 file 控件 name
- 动态ref，一个页面多次使用该组件 ref 名相同可能会产生问题，需要每次外部引用时传入不同的的 editorName，来初始化 eidtor
- 富文本的内容 editorContent （v-model 值）
- 为了可扩展，如果图片上传之后的处理方式不同，可以传入一个 promise 的回调函数 那么组件的 props 是
讯享网
如上代码，自定义需要的工具图标。如上添加了 imgClick 事件的图标的就是我们的上传图片工具图标。
引入 vue-quill-editor
讯享网
其他初始化代码
讯享网
结合 template 看 @change="onChange"
讯享网
v-model 内容和 editorName 是必填的，其他的 props 可选择性传入, 上传到其他 url 上的处理可能需要结合 uploadImageCb 来解决，因为默认的处理是按照上传到七牛的方式来处理的。所以上传到其他服务器上需要结合 uploadImageCb 函数来做扩展。
主要就是结合 vue-quill-editor 的 slot 和 使用 getSelection 和 insertEmbed 重写一些图标工具。然后在此基础上考虑更多问题，比如上传视频到七牛云，考虑封装的组件的扩展性等问题。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/185246.html