作者:手机用户2602901335 | 来源:互联网 | 2023-06-03 16:50
我们通常都会使用富文本编辑器在后台编辑内容,开发vue当然也少不了,我们通过vue官网的链接可以找到一些资源,或者去github上查找一些开源的编辑器。我使用的是vue-quill
我们通常都会使用富文本编辑器在后台编辑内容,开发vue当然也少不了,我们通过vue官网的链接可以找到一些资源,或者去github上查找一些开源的编辑器。
我使用的是vue-quill-editor,它的界面很简洁,功能也满足平时的编辑需要,不过于臃肿,但是它默认的图片上传是使用Data URL方式保存到了内容里,这不是我想要的,我相信大部分人也不想这样去保存图片,还好quill提供了如何去自定义按钮事件的demo(03-example.vue),那么我们就可以自己去实现图片的保存方式了。
先看看效果,可以支持直接上传文件和裁切图片
工具栏处理
先创建一个组件Editor.vue,引入vue-quill-editor,我们要做的就是重新定义它的操作按钮,也就是使用slot=”toolbar”这个插槽,先贴出quill案例的关键代码
:optiOns="editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@ready="onEditorReady($event)">
我们可以看到插槽内我们放了两个按钮分别是加粗和倾斜,quill会根据这些按钮的class属性绑定样式和操作,也就是说如果我们不用它的样式,自己写样式,自己绑定事件,就可以去处理自己的逻辑了,那我们要保留quill之前的所有功能只修改图片上传应该如何配置呢?原有的布局样式都保留,只去掉图片样式并单独加事件
ref="myTextEditor"
:optiOns="editorOption"
@change="onChange"
>
逻辑处理
布局完成了,接下来就是逻辑处理了,我们使用cli构建项目,创建两个vue文件
Quilleditor.vue是我们对vue-quill-editor的封装
CropUpload.vue是我们对vue-image-crop-upload的封装
具体代码请访问https://github.com/lihualong/…
总结
我们是在quill的基础上再封装了一个插件,基本的配置按照quill就好了
定义props让父组件传值,图片上传的url和file控件的name名称
处理图片点击的逻辑imgClick方法,判断图片是否裁切,选择不同的处理方式,
图片处理成功后,并把结果插入quill编辑器,
我们在父组件调用时都会采用v-model双向绑定,当父组件绑定值时我们使用watch给quill赋值,quill编辑后调用onchange 事件使用this.$emit(‘input’, this.content)给父组件传值
至此我们的自定义Editor就完成了,跟多的细致的处理就由您发挥了。