vue 封裝quill-editor富文本組件，圖片上傳，漢化文字等

1. 安裝

vue-quill-editor

2. quillEditor/index.vue 組件代碼

<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: {
      contentP: {
          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
    };
  },
  //監聽屬性 類似於data概念
  computed: {},
  //監控data中的數據變化
  watch: {},
  //方法集合
  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>
<style lang="less" scoped>
/deep/ .quill-editor {
  font-style:inherit;
  border: none;
  background: #ffffff;
  box-shadow: 0 1px 3px 0 rgba(52, 63, 75, 0.16);
  z-index: 112;
}
/deep/ .ql-editor strong{
  font-weight: bold;
}
/deep/ .ql-editor em{
  font-style: oblique;
}
/deep/ .ql-toolbar.ql-snow {
  border: none;
}
/deep/ .ql-toolbar.ql-snow {
  border-bottom: 1px solid rgba(52, 63, 75, 0.07);
}
/deep/ .ql-container.ql-snow {
  border: none;
}
/deep/ .ql-container.ql-snow .ql-tooltip {
  left: 0 !important;
}
/deep/ .ql-container {
  min-height: 175px;
}
/deep/ .ql-snow.ql-tooltip {
  transform: translateX(117.5px) translateY(10px);
  left: 0 !important;
}
/deep/ .ql-tooltip.ql-editing {
  left: 0 !important;
  width: 100%;
  // z-index: 111 !important;
}
/deep/ .ql-snow .ql-tooltip a.ql-preview {
  max-width: 67px;
}
/deep/ .ql-formats button {
  color: #969fb2;
}
/deep/ .editor-btn {
  margin-top: 20px;
}
/deep/ .ql-stroke {
  color: #ccc !important;
}
</style>

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即可，如下

/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: "刪除";
}