关于javascript:vuequilleditor富文本工具增强模块的使用

vue-quill-editor 富文本工具加强模块的应用

vue-quill-editor 富文本加强模块包含 quill-image-extend-module（上传图片）、’quill-image-resize-module（图片大小调整）
https://www.kancloud.cn/liuwa… 这是官网文档，然而示例里对于 action 的局部是个字符串 url，不晓得怎么用对应 axio 的 api，所以从其余博客找到的示例再批改的。

革新需要

若依告诉布告性能应用的根本的 quill 组件。外面如同是反对 action 配置 url，上传图片到服务器，然而没看到示例怎么用。
所以采纳 quill 的加强组件去实现。

代码

Editor index.vue(上传组件)的代码间接贴出来（参考的某位的博客的内容，具体忘了谁的）

<template>
  <div>
    <quill-editor
      ref="Editor"
      :content="content"
      :options="editorOption"
      class="editor" 
      @change="onEditorChange($event)" :style="styles"
    ></quill-editor>
  </div>
</template>

<script>
import {fileImageApi} from '@/api/ecmall/systemSetting'
import "quill/dist/quill.snow.css";
import {Quill,quillEditor} from "vue-quill-editor";
import ImageResize from "quill-image-resize-module"; // 援用
Quill.register("modules/imageResize", ImageResize); // 注册
// 工具栏配置
const toolbarOptions = [["bold", "italic", "underline",], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike' "strike"]
  ["code-block"], // 援用  代码块 -----['blockquote', 'code-block']
  [{header: 1}, {header: 2}], // 1、2 级题目 -----[{header: 1}, {header: 2}]
  [{list: "ordered"}, {list: "bullet"}], // 有序、无序列表 -----[{list: 'ordered'}, {list: 'bullet'}]
 /*  [{script: "sub"}, {script: "super"}], // 上标 / 下标 -----[{script: 'sub'}, {script: 'super'}]
  [{indent: "-1"}, {indent: "+1"}], // 缩进 -----[{indent: '-1'}, {indent: '+1'}]
  [{direction: "rtl"}], // 文本方向 -----[{'direction': 'rtl'}] */
  [{size: ["small", false, "large", "huge"] }], // 字体大小 -----[{size: ['small', false, 'large', 'huge'] }]
//  [{header: [1, 2, 3, 4, 5, false] }], // 题目 -----[{header: [1, 2, 3, 4, 5, 6, false] }]
  [{color: [] }, {background: [] }], // 字体色彩、字体背景色彩 -----[{color: [] }, {background: [] }]
 /*  [{font: [] }], // 字体品种 -----[{font: [] }] */
  [{align: [] }], // 对齐形式 -----[{align: [] }]
  /* ["clean"], // 革除文本格式 -----['clean'] */
  ["link", "image"] // 链接、图片、视频 -----['link', 'image', 'video']
];
const handlers = {
  // 重写图片上传
  image: function image() {
    let self = this;
    let fileInput = this.container.querySelector("input.ql-image[type=file]");
    if (fileInput === null) {fileInput = document.createElement("input");
      fileInput.setAttribute("type", "file");
      // 设置图片参数名
      fileInput.setAttribute("name", "file");
      // 可设置上传图片的格局
      fileInput.setAttribute(
        "accept",
        "image/png, image/gif, image/jpeg, image/bmp, image/x-icon"
      );
      fileInput.classList.add("ql-image");
      // 监听抉择文件
      fileInput.addEventListener("change", function() {let params = new FormData();
        params.append("multipart", fileInput.files[0]);
        const data = {
        model: 1,
        pid: 2
        }
        fileImageApi(params,data).then(res => {let length = self.quill.getSelection(true).index;
          // 写入图片
          self.quill.insertEmbed(length, "image", res.url);
          self.quill.setSelection(length + 1);
          fileInput.value = "";
        });
      });
      this.container.appendChild(fileInput);
    }
    fileInput.click();}
};
export default {
  name: "Editor",
  props: {
    /* 编辑器的内容 */
    value: {
      type: String,
      default: "",
    },
    /* 高度 */
    height: {
      type: Number,
      default: '400',
    },
    /* 最小高度 */
    minHeight: {
      type: Number,
      default: '300',
    },
    /* 只读 */
    readOnly: {
      type: Boolean,
      default: false,
    }
    
  },
  data() {
    return {
      content:
        "<h1>1</h1>",
      editorOption: {
        theme: "snow",
        placeholder: "请输出注释",
        modules: {
          toolbar: {
            container: toolbarOptions, // 工具栏
            handlers: handlers
          },
          imageResize: {displaySize: true},
          readOnly: this.readOnly,
        }
      }
    };
  },
  watch: {
        value: {handler(val) {this.content=val},
      immediate: true,
        }
    },
  mounted() {},
  created() {},
  components: {quillEditor},

  computed: {styles() {let style = {};
      if (this.minHeight) {style.minHeight = `${this.minHeight}px`;
      }
      if (this.height) {style.height = `${this.height}px`;
      }
      return style;
    },
  },

  methods: {onChange() {this.$emit("input",     document.querySelector(".ql-editor").innerHTML);
      },
    onEditorChange({quill, html, text}) {console.log('editor change!', quill, html, text)
        this.content = html
        this.$emit("input",this.content)
      }
  }
};
</script>
<style lang="less" scoped></style>

父组件调用如下：

<editor v-model="form.noticeContent" :min-height="500"/> 

对于 image-resize-module 引入报错 imports 谬误
批改 vue.config.js

configureWebpack 内增加
,
    plugins: [
      new webpack.ProvidePlugin({
        'window.Quill': 'quill/dist/quill.js',
        'Quill': 'quill/dist/quill.js'
      }),
    ],

装置 quill-image-extend-module（上传图片）、’quill-image-resize-module（图片大小调整）npm install 上述两个就行了。

不过这个富文本框革新之后，截图并复制到外面，还是传的是 base64 编码。