vue项目中的富文本编辑器的使用（vue-quill-editor）附完整前端代码

今天介绍一个富文本编辑器的工具。vue-quill-editor

项目展示：

项目中使用如下：

yarn add  vue-quill-editor

<template>
  <div>
    <quillEditor
      style="height:200px;margin-bottom:60px"
      v-model="content"
      ref="myQuillEditor"
      :options="editorOption"
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @change="onEditorChange($event)"
    />
    <el-button type="primary" @click="onEditorChange">保存</el-button>
    <el-button type="primary" @click="onCancel">取消</el-button>
  </div>
</template>
<script>
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
export default {
  data() {
    return {
      msg: "",
      content: "",
      editorOption: {}
    };
  },
  components: {
    quillEditor
  },
  mounted() {
    console.log(this.content);
  },
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill;
    }
  },
  methods: {
    onEditorReady(editor) {
      console.log("onEditorReady", this.content);
    },
    onEditorBlur() {
      // 失去焦点事件
      console.log("onEditorBlur", this.content);
    },
    onEditorFocus() {
      // 获得焦点事件
      console.log("onEditorFocus", this.content);
    },
    onEditorChange() {
      // 内容改变事件
      console.log("onEditorChange", this.content);
      this.$emit('editorContent',this.content)
    },
    // 取消
    onCancel(){
        this.content = ''
    }
  }
};
</script>

富文本编辑器里面的图片上传，（见下次更新）。