在vueCli中使用富文本编辑器：vue-quill-editor

在vueCli中使用富文本编辑器：vue-quill-editor

由于最近在项目中需要用到富文本编辑器，在博客上找了好多，都没成功，只有vue-quill-editor成功了，只是简单的引入使用，并没有使用太复杂的功能逻辑。至于其他的比如wangeditor，还有待研究。

使用步骤：

1、先在项目里进行安装

npm install vue-quill-editor 

2、在需要的组件里引用富文本编辑器及其样式

import { quillEditor } from 'vue-quill-editor'   // 富文本编辑器

import 'quill/dist/quill.core.css'   // 富文本编辑器的样式
import 'quill/dist/quill.snow.css'   // 富文本编辑器的样式
import 'quill/dist/quill.bubble.css'   // 富文本编辑器的样式

3、当作子组件注册在所需组件中

components: {
    quillEditor
  }

4、在视图中使用富文本编辑器

<quill-editor ref="text" v-model="content" class="myQuillEditor" :options="editorOption" />

5、所需配置

data () {
	return {
		content: '',     // 动态绑定文本框中的内容
		editorOption: {}     //  上传图片参数
	}
},

6、获取文本框中的内容并且使用v-html展示编辑后带CSS样式的文本

1）由于在data中已经进行双向绑定了，所以可以直接在视图中获取绑定

<div class="ql-container ql-snow">
	<div class="ql-editor" v-html="content"></div>
</div>

2) 由于在富文本框上绑定了ref，也可以用$refs获取(仅获取html，有（1）就够了)

let val = this.$refs.text.value;
console.log(val);  //  val即文本框内容