Vue中使用quill-editor之初体验

系列文章目录

一、 Vue中使用quill-editor之初体验
二、 Vue中使用quill-editor之修改工具栏(toolbar)
三、Vue中使用quill-editor之增加字体和文字大小
四、Vue中使用quill-editor之二次封装quill-editor

---

---

友情提醒：以下内容在本地测试无误，如果有不清楚的内容，建议查看系列文章的前几篇

一、安装quill-editor富文本编辑器

npm install vue-quill-editor --save

二、引入

1.全局引入

在main.js中引入（示例）：

// 文件：main.js
import  VueQuillEditor from 'vue-quill-editor'
// require styles 引入样式
// 下面三行必须要写
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

Vue.use(VueQuillEditor)

全局引入结束，在页面中即可使用。

2.局部引入

在模块中引入（示例）：

<script>
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { quillEditor } from "vue-quill-editor";
</script>

模块中引入结束。

三、使用

以局部引入为例：

<template>
  <quill-editor
    v-model="content"
    ref="myQuillEditor"
    :options="editorOption"
    @blur="onEditorBlur($event)"
    @focus="onEditorFocus($event)"
    @change="onEditorChange($event)"
  >
  </quill-editor>
</template> 
<script>
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 },
  data() {
    return {
      content: null,
      editorOption: {},
    };
  },
  methods: {
    onEditorBlur() {
      //失去焦点事件
    },
    onEditorFocus() {
      //获得焦点事件
    },
    onEditorChange() {
      //内容改变事件
    },
  },
};
</script>

效果图：

---

总结

以上为在vue中简单使用quill-editor的方法，需要定制富文本编辑器的内容请查看后续文章。