vue-quill-editor自定义图片上传
时间：2023-04-02 17:44:12
HTML
我们通常会使用富文本编辑器在后台编辑内容，当然vue的开发也是少不了的，我们可以通过vue官网的链接找到一些资源，或者去github找一些开源编辑器。我用的是vue-quill-editor，界面很简洁，功能也能满足平时的编辑需求，但不会太臃肿，不过它默认的图片上传是用DataURL保存到内容里的，这不是我想要的想，我相信大多数人都不想这样保存图片。幸好quill提供了自定义按钮事件的demo（03-example.vue），我们可以自己实现保存图片的方式。我们先来看看效果。它可以支持直接文件上传和裁剪图像工具栏处理。首先创建一个组件Editor.vue，引入vue-quill-editor。我们需要做的是重新定义它的操作按钮，即使用slot="toolbar"这个slot，先贴上quillcase的关键代码BoldItalic
可以看到我们在槽中放了两个按钮，都是粗体和斜体，而quill会根据这些按钮的class属性绑定样式和操作，也就是说如果不用它的样式，自己写样式，自己绑定事件，就可以处理我们自己的逻辑。那么我们要保留quill之前的所有功能，只修改图片上传。我们应该如何配置它？保留原有布局样式，仅去掉图片样式，单独添加事件
<选择class="ql-header"><选项值="#666600"><选项值="#003700"><选项值="#002966"><选项值="#3d1466">??<选项值="#c285ff"><选项值="#888888"><选项值="#a10000"> 逻辑处理布局完成，接下来就是逻辑处理了。我们使用cli来构建项目并创建两个vue文件。quilleditor.vue是我们对vue-quill-editor的封装CropUpload.vue是我们的vue-image-crop-上传包的具体代码请访问https://github.com/lihualong/...总结一下，我们在quill的基础上封装了一个插件。基本配置就像羽毛笔一样。定义props让父组件通过value，图片上传的url和文件控件的名称来处理图片点击的逻辑imgClick方法，判断图片是否被裁剪，选择不同的处理方式，之后图像处理成功，并将结果插入到quill编辑器中，当我们在父组件中调用它时，两者都会使用v-model双向绑定。当父组件绑定值时，我们使用watch给quill赋值。编辑完成后，quill调用onchange事件，使用this.$emit('input',this.content)传值给父组件。至此我们的自定义Editor就完成了，更详细的处理就交给你了
