vue富文本 图片处理

<template> <div> <el-upload class="avatar-uploader2" :action="uploadImgUrl" name="file" :show-file-list="false" :on-success="uploadSuccessEdit" :before-upload="beforeUploadEdit" > </el-upload> <div class="editor" ref="editor" :style="styles"></div> </div> </template> <script> import Quill from "quill"; import "quill/dist/quill.core.css"; import "quill/dist/quill.snow.css"; import "quill/dist/quill.bubble.css"; export default { 
    name: "Editor", props: { 
    /* 编辑器的内容 */ value: { 
    type: String, default: "", }, /* 高度 */ height: { 
    type: Number, default: null, }, /* 最小高度 */ minHeight: { 
    type: Number, default: null, }, }, data() { 
    return { 
    uploadImgUrl:process.env.VUE_APP_SECRET + "/api-file/files-anon", // uploadImgUrl: "http://10.0.0.197:9900" + "/api-file/files-anon", // 上传的图片服务器地址 editorOption: { 
    placeholder: "", theme: "snow", // or 'bubble' modules: { 
    toolbar: { 
    handlers: { 
    image: function (value) { 
    if (value) { 
    // 触发input框选择图片文件 document.querySelector(".avatar-uploader2 input").click(); } else { 
    this.quill.format("image", false); } }, }, }, }, }, Quill: null, currentValue: "", options: { 
    theme: "snow", bounds: document.body, debug: "warn", modules: { 
    // 工具栏配置 toolbar: [ ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线 ["blockquote", "code-block"], // 引用 代码块 [{ 
    list: "ordered" }, { 
    list: "bullet" }], // 有序、无序列表 [{ 
    indent: "-1" }, { 
    indent: "+1" }], // 缩进 [{ 
    size: ["small", false, "large", "huge"] }], // 字体大小 [{ 
    header: [1, 2, 3, 4, 5, 6, false] }], // 标题 [{ 
    color: [] }, { 
    background: [] }], // 字体颜色、字体背景颜色 [{ 
    align: [] }], // 对齐方式 ["clean"], // 清除文本格式 ["link", "image", "video"], // 链接、图片、视频 ], }, placeholder: "请输入内容", readOnly: false, }, }; }, computed: { 
    styles() { 
    let style = { 
   }; if (this.minHeight) { 
    style.minHeight = `${ 
     this.minHeight}px`; } if (this.height) { 
    style.height = `${ 
     this.height}px`; } return style; }, }, watch: { 
    value: { 
    handler(val) { 
    if (val !== this.currentValue) { 
    this.currentValue = val === null ? "" : val; if (this.Quill) { 
    this.Quill.pasteHTML(this.currentValue); } } }, immediate: true, }, }, mounted() { 
    this.init(); }, beforeDestroy() { 
    this.Quill = null; }, methods: { 
    // 上传图片前 beforeUploadEdit(res, file) { 
    // 显示loading动画 this.quillUpdateImg = true; }, // 上传图片成功 uploadSuccessEdit(res, file) { 
    // res为图片服务器返回的数据 // 获取富文本组件实例 let quill = this.$refs.myQuillEditor.quill; // 如果上传成功 if (res.code == 0) { 
    // 获取光标所在位置 let length = quill.getSelection().index; // 插入图片 res.data.url为服务器返回的图片地址 quill.insertEmbed(length, "image", res.data.url); console.log('----------------------'); console.log(res.data.url); // 调整光标到最后 quill.setSelection(length + 1); } else { 
    this.$message.error("图片插入失败"); } // loading动画消失 this.quillUpdateImg = false; }, init() { 
    const editor = this.$refs.editor; this.Quill = new Quill(editor, this.options); this.Quill.pasteHTML(this.currentValue); this.Quill.on("text-change", (delta, oldDelta, source) => { 
    const html = this.$refs.editor.children[0].innerHTML; const text = this.Quill.getText(); const quill = this.Quill; this.currentValue = html; this.$emit("input", html); this.$emit("on-change", { 
    html, text, quill }); }); this.Quill.on("text-change", (delta, oldDelta, source) => { 
    this.$emit("on-text-change", delta, oldDelta, source); }); this.Quill.on("selection-change", (range, oldRange, source) => { 
    this.$emit("on-selection-change", range, oldRange, source); }); this.Quill.on("editor-change", (eventName, ...args) => { 
    this.$emit("on-editor-change", eventName, ...args); }); }, }, }; </script> <style> .editor, .ql-toolbar { 
    white-space: pre-wrap !important; line-height: normal !important; } .quill-img { 
    display: none; } .ql-snow .ql-tooltip[data-mode="link"]::before { 
    content: "请输入链接地址:"; } .ql-snow .ql-tooltip.ql-editing a.ql-action::after { 
    border-right: 0px; content: "保存"; padding-right: 0px; } .ql-snow .ql-tooltip[data-mode="video"]::before { 
    content: "请输入视频地址:"; } .ql-snow .ql-picker.ql-size .ql-picker-label::before, .ql-snow .ql-picker.ql-size .ql-picker-item::before { 
    content: "14px"; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before { 
    content: "10px"; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before { 
    content: "18px"; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before { 
    content: "32px"; } .ql-snow .ql-picker.ql-header .ql-picker-label::before, .ql-snow .ql-picker.ql-header .ql-picker-item::before { 
    content: "文本"; } .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before { 
    content: "标题1"; } .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before { 
    content: "标题2"; } .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before { 
    content: "标题3"; } .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before { 
    content: "标题4"; } .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before { 
    content: "标题5"; } .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before { 
    content: "标题6"; } .ql-snow .ql-picker.ql-font .ql-picker-label::before, .ql-snow .ql-picker.ql-font .ql-picker-item::before { 
    content: "标准字体"; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before { 
    content: "衬线字体"; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before { 
    content: "等宽字体"; } </style> 

使用的时候

<Editor v-model="formLabelAlign.information" :value="formLabelAlign.information"/> information 就是富文本内容