1.vue+element ui+ qill

组件引入：

<qill-editor-component
            :serviceDetail="service.serviceContent"
            @getDetailFn="getDetail"
            :disabledEdit="disabled"
          ></qill-editor-component>

组件内容：

<template>
  <div class="editor">
    <!-- 图片上传组件辅助-->
    <!-- 如果你需要手动控制数据流，需要像这样手动监听changed事件 -->

    <quill-editor
      v-model="content"
      ref="myQuillEditor"
      :options="editorOption"
      outPut="html"
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @change="onEditorChange($event)"
      @selection-change="selectionChange"
      :style="{ height: '88vh', '100%'}"
      class="junScrollBar"
    >
      <!-- 自定义toolar -->
      <div id="toolbar" slot="toolbar">
        <button class="ql-bold" title="加粗">Bold</button>
        <button class="ql-italic" title="斜体">Italic</button>
        <button class="ql-underline" title="下划线">underline</button>
        <button class="ql-strike" title="删除线">strike</button>
        <button class="ql-blockquote" title="引用"></button>
        <button class="ql-code-block" title="代码"></button>
        <button class="ql-header" value="1" title="标题1"></button>
        <button class="ql-header" value="2" title="标题2"></button>
        <button class="ql-list" value="ordered" title="有序列表"></button>
        <button class="ql-list" value="bullet" title="无序列表"></button>
        <select class="ql-header" title="段落格式">
          <option selected>段落</option>
          <option value="1">标题1</option>
          <option value="2">标题2</option>
          <option value="3">标题3</option>
          <option value="4">标题4</option>
          <option value="5">标题5</option>
          <option value="6">标题6</option>
        </select>
        <select class="ql-size" title="字体大小">
          <option value="10px">10px</option>
          <option value="12px">12px</option>
          <option value="14px">14px</option>
          <option value="16px" selected>16px</option>
          <option value="18px">18px</option>
          <option value="20px">20px</option>
          <option value="20px">24px</option>
          <option value="20px">30px</option>
        </select>
        <select class="ql-font" title="字体">
          <option value="SimSun">宋体</option>
          <option value="SimHei">黑体</option>
          <option value="Microsoft-YaHei">微软雅黑</option>
          <option value="KaiTi">楷体</option>
          <option value="FangSong">仿宋</option>
          <option value="Arial">Arial</option>
        </select>
        <select class="ql-color" value="color" title="字体颜色"></select>
        <select class="ql-background" value="background" title="背景颜色"></select>
        <select class="ql-align" value="align" title="对齐"></select>
        <button class="ql-clean" title="还原"></button>
        <button class="ql-link" title="超链接"></button>
        <button class="ql-image" title="图片"></button>
        <!-- <button class="ql-video" title="视频"></button> -->
      </div>
    </quill-editor>
    <el-upload
      class="ueUpload"
      :action="serverUrl"
      name="img"
      ref="upload"
      :data="uploadUeData"
      :headers="header"
      :show-file-list="false"
      :on-success="uploadSuccess"
      :on-error="uploadError"
      :before-upload="uploadbefore"
      accept="image/png, image/jpeg, image/gif, image/jpg"
    ></el-upload>
  </div>
</template>
<script>
import { Quill, quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

// 自定义字体大小
let Size = Quill.import("attributors/style/size");
Size.whitelist = ["10px", "12px", "14px", "16px", "18px", "20px"];
Quill.register(Size, true);
// 自定义字体类型
var fonts = [
  "SimSun",
  "SimHei",
  "Microsoft-YaHei",
  "KaiTi",
  "FangSong",
  "Arial",
  "Times-New-Roman",
  "sans-serif",
  "宋体",
  "黑体"
];
var Font = Quill.import("formats/font");
Font.whitelist = fonts;
Quill.register(Font, true);

export default {
  name: "ueEditor",
  components: {
    quillEditor
  },
  props: {
    // 编辑器内容
    serviceDetail: {
      type: String,
      default: ""
    },
    disabledEdit: {
      type: Boolean,
      default: ""
    }
  },
  data() {
    return {
      // content: "",
      content: "",
      // 根据图片上传状态来确定是否显示loading动画，刚开始是false,不显示
      quillUpdateImg: false,
      str: "",
      editorOption: {
        theme: "snow",
        placeholder: "",
        modules: {
          toolbar: {
            container: "#toolbar",
            handlers: {
              image: function(value) {
                if (value) {
                  // 触发input框选择图片文件
                  document.querySelector(".ueUpload input").click();
                } else {
                  this.quill.format("image", false);
                }
              }
              // link: function(value) {
              //   if (value) {
              //     var href = prompt('请输入url');
              //     this.quill.format("link", href);
              //   } else {
              //     this.quill.format("link", false);
              //   }
              // },
            }
          }
        }
      },
      //  要上传的图片的服务器地址
      serverUrl: "",
      header: {
        // token: sessionStorage.token
      }, // 有的图片服务器要求请求头需要有token
      addRange: [],
      uploadUeData: {
        file: "",
        project: "JINXINSERVE_WEB"
      },
      photoUrl: "", // 上传图片地址
      uploadType: "", // 上传的文件类型（图片、视频
      html: ""
    };
  },
  // 如果你需要得到当前的editor对象来做一些事情，你可以像下面这样定义一个方法属性来获取当前的editor对象，实际上这里的$refs对应的是当前组件内所有关联了ref属性的组件元素对象
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill;
    }
  },
  created() {},
  watch: {
    serviceDetail(val) {
      this.content = val;
    }
  },
  mounted() {
    // this.editor.getModule("toolbar").addHandler("image", this.imgHandler);
    // this.editor.getModule("toolbar").addHandler("video", this.videoHandler);
    let content = ""; // 请求后台返回的内容字符串
    this.str = this.escapeStringHTML(content);
    this.initEditor();
  },

  // 如果需要手动控制数据同步，父组件需要显式地处理changed事件
  methods: {
    initEditor() {
      // 如果是查看，编辑栏点击无效果
      if (this.disabledEdit) {
        document.getElementById("toolbar").style.pointerEvents = "none";
      }
    },
    escapeStringHTML(str) {
      str = str.replace(/</g, "<");
      str = str.replace(/>/g, ">");
      return str;
    },
    // 图片上传之前调取的函数
    // 这个钩子还支持 promise
    // 富文本图片上传前
    uploadbefore(file) {
      // 显示loading动画
      this.quillUpdateImg = true;
      this.uploadUeData.file = file;
    },

    onEditorBlur(editor) {},
    onEditorFocus(editor) {
      // 富文本获得焦点时的事件
      if (this.disabledEdit) {
        editor.enable(false); // 在获取焦点的时候禁用
      }
    },
    onEditorChange({ editor, html, text }) {
      //  当编辑器文本发生变化， this。content可以试试获取到当前编辑器内的文本内容
      this.content = html;
      // console.log("内容：", this.content);
      this.$emit("getDetailFn", this.content);
    },
    // 点击图片ICON触发事件
    imgHandler(state) {
      this.addRange = this.editor.getSelection();
      if (state) {
        let fileInput = document.getElementById("imgInput");
        fileInput.click(); // 加一个触发事件
      }
      this.uploadType = "image";
    },
    // 点击视频ICON触发事件
    videoHandler(state) {
      this.addRange = this.editor.getSelection();
      if (state) {
        let fileInput = document.getElementById("imgInput");
        fileInput.click(); // 加一个触发事件
      }
      this.uploadType = "video";
    },
    uploadSuccess(res, file) {
      // res为图片服务器返回的数据
      // 获取富文本组件实例
      let quill = this.$refs.myQuillEditor.quill;
      // 如果上传成功
      if (res.code == 200) {
        console.log("ue", res);
        // 获取光标所在位置
        let length = quill.getSelection().index;
        // 插入图片  res.url为服务器返回的图片地址
        quill.insertEmbed(length, "image", res.url);
        // 调整光标到最后
        quill.setSelection(length + 1);
      } else {
        this.$message.error("图片插入失败");
      }
      // loading动画消失
      this.quillUpdateImg = false;
    },
    // 富文本图片上传失败
    uploadError() {
      // loading动画消失
      this.quillUpdateImg = false;
      this.$message.error("图片插入失败");
    },
    //  20190920 添加
    selectionChange(editor, range) {
      if (range) {
        if (range.start !== range.end) {
          this.selectedText = editor.getText(range.start, range.end);
          editor.formatText(range, "custom", "hello world");
        }
      }
    }
  }
};
</script>
<style lang="scss">
.editor {
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 1px 2px #ccc;

  .ql-toolbar {
    border: none;
    border-bottom: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 1px 1px 2px #ccc;
  }

  .ql-container {
    border: none;
  }
  .ql-editor {
    height: 89%;
  }
}
</style>