Vue+Element UI使用富文本编辑器案例

npm安装编辑器组件

具体方法：npm install vue-quill-editor –save

具体实现 1.在components文件夹里创建editor.vue组件，具体代码如下：

<template> <div> <script id="editor" type="text/plain"></script> </div> </template> <script> export default { name: UE, data () { return { editor: null } }, props: { defaultMsg: { type: String }, config: { type: Object } }, mounted() { const _this = this; this.editor = UE.getEditor(editor, this.config); // 初始化UE this.editor.addListener("ready", function () { _this.editor.setContent(_this.defaultMsg); // 确保UE加载完成后，放入内容。 }); }, methods: { getUEContent() { // 获取内容方法 return this.editor.getContent() } }, destroyed() { this.editor.destroy(); } } </script>

2.页面使用富文本编辑器： 首先引入编辑器组件 import { quillEditor } from “vue-quill-editor”; //调用编辑器

3.样式引入 import ‘quill/dist/quill.core.css’ import ‘quill/dist/quill.snow.css’ import ‘quill/dist/quill.bubble.css’

4.使用

<el-form-item label="详细描述" prop="words"> <div class="edit_container"> <quill-editor v-model="ruleForm.words" ref="myQuillEditor" class="editer" :options="editorOption" @ready="onEditorReady($event)"> </quill-editor> </div> </el-form-item>

5.js部分

data() { return { editorOption: {} },

components: {//使用编辑器 quillEditor }

computed: { editor() { return this.$refs.myQuillEditor.quill }

methods: { onEditorReady(editor) { },

简单粗暴的表述，希望对你有所帮助！加油