vue Vue-Quill-Editor 基于Quill、适用于Vue的富文本编辑器（二）解决图片上传base64，汉化文字问题

更多：vue Vue-Quill-Editor 基于Quill、适用于Vue的富文本编辑器（一）（基础封装）

1. 安装 vue-quill-editor

vue-quill-editor

vue-quill-editor插入图片的方式是将图片转为base64再放入内容中,直接存储数据库会导致内容过多占用大量的数据库存储空间,加载速度也会变慢,此方法是将图片上传后端服务器，后端返回一个url地址，设置到富文本里面。

解决之前:

解决之后:(url不是base64了)

2. 封装 quillEditor/index.vue 组件代码（解决上传图片是base64问题）

<template>
  <div class>
    <div v-loading="imageLoading" element-loading-text="请稍等，图片上传中">
      <quill-editor ref="newEditor" v-model="content" :options="editorOption" @change="onChange"></quill-editor>
      <!-- 文件上传input 将它隐藏-->
      <el-upload
        style="display:none"
        :action="apiurl"
        :show-file-list="false"
        :before-upload="newEditorbeforeupload"
        :on-success="newEditorSuccess"
        ref="uniqueId"
        id="uniqueId"
      ></el-upload>
    </div>
  </div>
</template>

<script>
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { quillEditor } from "vue-quill-editor";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    quillEditor
  },
  props: {
      content: {
          type: String,
          default: ""
      }
  },
  data() {
    //这里存放数据
    return {
      content: "",
      editorOption: {
        placeholder: "",
        modules: {
          toolbar: [
            ["bold", "italic", "underline", "strike"],
            ["blockquote", "code-block"],
            [{ header: 1 }, { header: 2 }],
            [{ 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"]
          ]
        }
      },
      imageLoading: false,
      apiurl: this.$httpServer.fdfsupload
    };
  },
  //方法集合
  methods: {
    onChange() {
      this.$emit("inputContent", this.content);
    },
    newEditorbeforeupload(file) {
      const isJPG = file.type === "image/jpeg" || file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 10;
      if (!isJPG) {
        this.$message.error("上传图片只能是 JPG或PNG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 10MB!");
      }
      if (isJPG && isLt2M) this.imageLoading = true;
      return isJPG && isLt2M;
    },
    //上传图片回调
    newEditorSuccess(response, file, fileList) {
      if (response.code == "0") {
        this.addImgRange = this.$refs.newEditor.quill.getSelection();
        let length = this.$refs.newEditor.quill.selection.savedRange.index;
        this.$refs.newEditor.quill.insertEmbed(length, "image", response.data);
        this.$refs.newEditor.quill.setSelection(length + 1);
      }
      this.imageLoading = false;
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.content = this.contentP;
    var imgHandler = async function(state) {
      if (state) {
        var fileInput = document.querySelector("#uniqueId input"); //隐藏的file元素
        fileInput.click(); //触发事件
      }
    };
    this.$refs.newEditor.quill
      .getModule("toolbar")
      .addHandler("image", imgHandler);
  },
};
</script>

3. 引用组件

<template>
	<div>
		<label>富文本组件</label>
		<quill-editor @inputContent='inputContent'></quill-editor>
	</div>
</template>
<script>
import quillEditor from "./quillEditor/index.vue";
export default {
	components: {
	   quillEditor,
	},
	data() {
    	return {
    		content:"",
    	}
    },
	methods: {
		// 监听子组件富文本的值，赋值给 content 
	    inputContent(value){
	      this.content = value;
	    },
    }
}
</script>

4. 默认是英文的，需要格式化的找到css控制content即可，如下

<style lang="less" scoped>
/deep/ .ql-snow .ql-tooltip[data-mode="link"]::before {
  content: "链接地址:";
}
/deep/ .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
  content: "保存";
}
/deep/ .ql-snow .ql-tooltip::before {
  content: "访问URL:";
}
/deep/ .ql-snow .ql-tooltip a.ql-action::after {
  content: "编辑";
}
/deep/ .ql-snow .ql-tooltip a.ql-remove::before {
  content: "删除";
}
</style>