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

深藏阁楼爱情的钟 2023-07-01 15:59 31阅读 0赞

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

### **项目展示：** ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70][]

### **项目中使用如下：** ###

> 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>

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200123211349116.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ==,size_16,color_FFFFFF,t_70