Vue 中安装使用vue-quill-editor富文本编辑器

一、什么是富文本编辑器?

富文本编辑器.png

简单介绍一下，看过上面的图，您大致对富文本编辑器有个了解了，传统的textArea输入框输入的内容没法做格式上的更改，它的功能跟我们的word一样，可以对其中内容的格式做一些调整，还可以添加图片等等，它在开发中有个专有名词，叫富文本编辑器。
1、ueditor
国内人用ueditor的比较多，真的很中国化，经常在贴吧或论坛里看到这种风格的富文本编辑器。

2、bootstrap-wysiwyg
这个插件是bootstrap官网推荐的。

3、vue-quill-editor
这个据说大企业用的比较多，百度一下技术背景，对它的评价是不限制框架，但是需要定制，理念很先进。

主要研究学习第三种vue-quill-editor富文本编辑

1、安装依赖

npm install vue-quill-editor –save 或者
yarn add vue-quill-editor

2、使用

2.1 在src/plugins/VueQuillEditor.js(目录没有可以重建)

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

import Vue from 'vue'
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.2 在main.js中引入

import './plugins/VueQuillEditor.js'

3、实现

3.1在具体vue文件中引用

3.2在data中绑定值

export default {
  data() {
    return {
      //富文本内容
      content: "",
      editorOption: {}
    };
  },
};

这样就实现了富文本编辑器！