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

末蓝、 2022-03-10 19:30 904阅读 0赞

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

npm安装编辑器组件

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

具体实现  
在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>

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

样式引入

import ‘quill/dist/quill.core.css’
    import ‘quill/dist/quill.snow.css’
    import ‘quill/dist/quill.bubble.css’

使用

<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>

js部分

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

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

methods: {
       onEditorReady(editor) {
       },

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