vue-quill-editor 富文本编辑器 自定义上传图片

① 安装插件，以及引入插件

使用命令：npm install vue-quill-editor -S

② main.js 中引入

// 导入富文本编辑器import VueQuillEditor from 'vue-quill-editor'// 导入富文本编辑器样式import 'quill/dist/quill.core.css'import 'quill/dist/quill.snow.css'import 'quill/dist/quill.bubble.css'import Quill from 'quill'// 将富文本编辑器，注册为全局可用组件Vue.use(VueQuillEditor)

③ 上传重点

const toolbarOptions = [["bold", "italic", "underline", "strike"], // toggled buttons["blockquote", "code-block"],[{"header": 1}, {"header": 2}], // custom button values[{"list": "ordered"}, {"list": "bullet"}],[{"script": "sub"}, {"script": "super"}], // superscript/subscript[{"indent": "-1"}, {"indent": "+1"}], // outdent/indent[{"align": []}],["link", "image"],["clean"] // remove formatting button];

data

editorOption: {placeholder: '编辑文章内容',theme: 'snow', // or ‘bubble’modules: {toolbar: {container: toolbarOptions, // 工具栏handlers: {'image': function(value) {if (value) {// 触发input框选择图片文件console.log("点击了");document.querySelector('.avatar-uploader2 input').click()} else {this.quill.format('image', false);}}}}}},

ivew 上传组件

<Upload type="select" :action="uploadUrl" :headers="uploadHeader" v-if="uploadFlag" :format="['jpg','jpeg','png']":max-size="5120" :on-success="handleSuccess" :on-format-error="handleImgFormatError":on-exceeded-size="handleImgMaxSize" class="avatar-uploader2 input"></Upload>

method

// 上传图片handleSuccess(response) {let quill = this.$refs.myQuillEditor.quill;if (response.code == 1) {this.$Message.success(response.msg)// 获取光标所在位置let length = quill.getSelection().index;// 插入图片 res.info为服务器返回的图片地址quill.insertEmbed(length, 'image', response.data.link + response.data.url)// 调整光标到最后quill.setSelection(length + 1)} else {this.$Message.error(response.msg)}},