vue富文本编辑器vue-quill-editor的使用以及内容的渲染

vue富文本编辑器vue-quill-editor的使用方法

这是vue自家的一款编辑器，支持IE10+以上的浏览器。界面比较友好，如果你需要对你的文字，图像做一些编辑。它是一个不错的选择，先上一张效果图吧！

先上代码

主要介绍在vue中使用，所以直接npm安装就可以，安装命令如下。

npm i vue-quill-editor --save

1、在main.js中引用

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、引入后，我们就可以正常使用了，在需要用的地方直接引入就好了

import { quillEditor } from 'vue-quill-editor'

3、在模板中直接使用就好了

<template>
	<div>
		<el-upload
			// 上传的地址
            action="http://www.***/upload/form_upload"
            accept="image/png, image/jpeg"
            :before-upload="beforeEditorPicUpload"
            :on-success="editorPicSucc"
            class="uploadImage"
            >
          </el-upload>
		<quill-editor
            v-model="content"
            :options="editorOption"
            ref="QuillEditor"
            >
          </quill-editor>
	</div>	
</template>

<script>
	import { quillEditor } from 'vue-quill-editor'
	export default {
		components: {
			quillEditor
		},
		data() {
			retutn {
				content: '',
				editorOption: {
		          modules: {
		            toolbar: {
		              container: toolbarOptions,  // 工具栏
		              handlers: {
		                'image': function (value) {
		                // 此处点击富文本框的图片按钮调用的element-ui的upload插件实现图片的上传
		                  if (value) {
		                    document.querySelector('.uploadImage input').click()
		                  } else {
		                    this.quill.format('image', false);
		                  }
		                }
		              }
		            }
		          }
		        }
			}
		},
		methods: {
			  //富文本点击调用上传按钮然后把图片插入富文本框中
		      editorPicSucc(res, file) {
		        // 获取富文本组件实例
		        let quill = this.$refs.QuillEditor.quill;
		        // 如果上传成功
		        if(res){
		          let length = quill.getSelection().index;
		          quill.insertEmbed(length, 'image', res.FileUrl);
		          quill.setSelection(length + 1)
		        }else{
		          Message.error('图片插入失败')
		        }
		      },
		}
	}
</script>

然后是关于显示的问题

本人一开始看到拿到的是html数据，所以直接就用v-html指令把数据给输出出来，但是给文本设置了居中并没有效果。仔细看了后发现hml的标签上有类名。才想起来应该是没有引入插件css的问题，引入插件后，问题正常解决了。下面是关于渲染的代码

这是css的路径，建议下载下来，在html页面中正常应用就可以了

https://cdn.quilljs.com/1.3.3/quill.snow.css

// 外边的两层div是必须要加的，里面的哪个div正常使用v-html指令后就可以正常显示
<div class="ql-container ql-snow">
      <div class="ql-editor">
         <div v-if="!isObj" v-html="pro.material_intro">{{pro.material_intro}}}</div>
     </div>
</div>

这就是我对这个插件的理解，如果能帮到你那再好不过了，也欢迎留言指正！