一、什么是富文本编辑器?
富文本编辑器.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文件中引用
<quill-editor ref="myTextEditor" v-model="content" :options="editorOption"
style="height: 600px; margin-bottom: 10px"></quill-editor>
3.2在data中绑定值
export default {
data() {
return {
//富文本内容
content: "",
editorOption: {}
};
},
};
