vue使用富文本编辑器vue-quill-editor

效果图

安装

npm install vue-quill-editor --save

引入

全局

• 全局引入(main)

import  VueQuillEditor from 'vue-quill-editor'//调用编辑器
// 样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor)

局部引入

PS

全局引入 或者局部引入必须引入这3个文件css
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

一定要引入这三个css，不然文本编辑器会出现不规则黑白几何图形
//这三个css可以在main.js中引入，也可以在具体使用的.vue文件中引入

import { quillEditor } from 'vue-quill-editor'
 
export default {
  components: {
    quillEditor
  }
}

使用

<template>
  <div>
    <div style="width: 80%; margin: 0 auto">
      <quill-editor
        v-model="content"
        ref="myQuillEditor"
        :options="editorOption"
        @blur="onEditorBlur($event)"
        @focus="onEditorFocus($event)"
        @change="onEditorChange($event)"
        @ready="onEditorReady($event)"
      >
      </quill-editor>
    </div>
  </div>
</template>
 
<script>
import { quillEditor } from "vue-quill-editor";
export default {
  name: "HomeView",
  components: { quillEditor },
  data() {
    return {
      content: "",
      TiLength:0,
      // 富文本编辑器配置
      editorOption: {},
    };
  },
 
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    // 失去焦点事件
    onEditorBlur(quill) {
      console.log("editor blur!", quill);
    },
    // 获得焦点事件
    onEditorFocus(quill) {
      console.log("editor focus!", quill);
    },
    // 准备富文本编辑器
    onEditorReady(quill) {
      console.log("editor ready!", quill);
    },
    // 内容改变事件
    onEditorChange({ quill, html, text }) {
      console.log("editor change!", quill, html, text);
      this.content = html;
    },
  },
};
</script>
<style>
 
</style>

参考