vue-quill-editor

最新推荐文章于 2024-07-06 10:33:24 发布

南朝听月

最新推荐文章于 2024-07-06 10:33:24 发布

阅读量476

点赞数

分类专栏： vue2 文章标签： vuequilleditor quill-editor vue富文本编辑器富文本编辑器

本文链接：https://blog.csdn.net/weixin_43131046/article/details/115319632

版权

vue2 专栏收录该内容

88 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何在Vue项目中集成和使用vue-quill-editor富文本编辑器，包括安装、全局及局部引入、编辑器选项设置、事件监听以及内容变更时的操作。通过示例代码展示了编辑器的初始化、焦点获取与失去、内容变更等关键步骤。

摘要由CSDN通过智能技术生成

在这里插入图片描述

vue项目中富文本编辑器的使用

1、引入

npm install vue-quill-editor --save

在那个组件中用就在那个组件中引入

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 {
  components: {
    quillEditor
  }
}

在项目中全局引入

import Vue from 'vue'
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)

2、使用

//html
<quill-editor
          ref="myQuillEditor"
          v-model="content"
          :options="editorOption"
          @blur="onEditorBlur($event)"
          @focus="onEditorFocus($event)"
          @ready="onEditorReady($event)"
          @change="onEditorChange($event)"
        ></quill-editor>
//data
      content: "",
      // content: '<h2>I am Example</h2>',
      //富文本配置项
      editorOption: {
        placeholder: "编辑文章内容",
      }，
//逻辑
      //失去焦点触发
      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
      }
  },
  computed: {
    editor() {
        return this.$refs.myQuillEditor.quill
      }
  },
  mounted() {
      console.log('this is current quill instance object', this.editor)
    }