富文本vue-quill-editor修改图片上传方法

富文本vue-quill-editor修改图片上传方法

HTML 代码 HTML codes

<!-- 上传的组件 -->

<upload style="display:none" ref="articalImg" @getUrl="getImg" class="articalImg"></upload>

     <quill-editor v-model="dataForm.content"

                ref="myQuillEditor"

                class="editer"

                :options="editorOption">

    </quill-editor>

js代码

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

  [{ direction: "rtl" }], // text direction

  [{ size: ["small", false, "large", "huge"] }], // custom dropdown

  [{ header: [1, 2, 3, 4, 5, 6, false] }],

  [{ color: [] }],

  [{ background: [] }],

  //   [{'color': []}, {'background': []}],          // dropdown with defaults from theme

  [{ font: [] }],

  [{ align: [] }],

  ["link", "image", "video"],

  ["clean"] // remove formatting button

];

// 菜单栏中文标题

const titleConfig = {

  "ql-bold": "加粗",

  "ql-color": "颜色",

  "ql-font": "字体",

  "ql-code": "插入代码",

  "ql-italic": "斜体",

  "ql-link": "添加链接",

  "ql-background": "背景颜色",

  "ql-size": "字体大小",

  "ql-strike": "删除线",

  "ql-script": "上标/下标",

  "ql-underline": "下划线",

  "ql-blockquote": "引用",

  "ql-header": "标题",

  "ql-indent": "缩进",

  "ql-list": "列表",

  "ql-align": "文本对齐",

  "ql-direction": "文本方向",

  "ql-code-block": "代码块",

  "ql-formula": "公式",

  "ql-image": "图片",

  "ql-video": "视频",

  "ql-clean": "清除字体样式",

  "ql-upload": "文件"

};

export default {

  data() {

    return {

      editorOption: {

        modules: {

          toolbar: {

            container: toolbarOptions, // 工具栏

            handlers: {

              image: function(value) {

                if (value) {

                  // this.$refs.articalImg.click()

                  document

                    .querySelector(".articalImg .el-upload__input")

                    .click();

                } else {

                  this.quill.format("image", false);

                }

              }

            }

          }

        }

      }

    };

  },

  computed: {

    editor() {

      return this.$refs.myQuillEditor.quill;

    }

  },

  methods: {

    onEditorReady(e) {

      console.log("ready", e);

    },

    getImg(res) {

      let quill = this.$refs.myQuillEditor.quill;

      if (res) {

        // 获取光标所在位置

        let length = quill.getSelection().index;

        // 插入图片，res为服务器返回的图片链接地址

        quill.insertEmbed(length, "image", res);

        // 调整光标到最后

        quill.setSelection(length + 1);

      } else {

        // 提示信息，需引入Message

        Message.error("图片插入失败");

      }

    },

  }

};