element-vue使用富文本编辑器【前端】

cnpm install vue-quill-editor

cnpm install quill

<!-- 组件代码如下 -->   
<template>              
    <div>
        <script id="editor" type="text/plain"></script>
    </div>
</template>
<script>
export default {        
    name: 'Quilleditor',
    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

<template>
    <div>
        <el-row class="warp">
            <el-col :span="24" class="warp-main">
                <el-form ref="infoForm" :model="infoForm" :rules="rules" label-width="120px">
                    <el-form-item label="标题" prop="a_title">
                        <el-input v-model="infoForm.a_title"></el-input>
                    </el-form-item>
                    <el-form-item label="来源" prop="a_source">
                        <el-input v-model="infoForm.a_source"></el-input>
                    </el-form-item>
                    <el-form-item label="内容">
                        <div class="edit_container">
                            <quill-editor v-model="infoForm.a_content" ref="myQuillEditor" class="editer" :options="editorOption" @ready="onEditorReady($event)">
                            </quill-editor>
                        </div>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">保存</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>
<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'
export default {
    data() {
        return {
            infoForm: {
                a_title: '',
                a_source: '',
                a_content:'',
                editorOption: {}
            },
            //表单验证
            rules: {
                a_title: [
                    {required: true, message: '请输入标题', trigger: 'blur'}
                ],
                a_content: [
                    {required: true, message: '请输入详细内容', trigger: 'blur'}
                ]
            },
        }
    },      
    computed: { 
        editor() {  
            return this.$refs.myQuillEditor.quill
        }           
    },              
    mounted() {         
        //初始化    
    },              
    methods: {          
        onEditorReady(editor) {
        },                  
        onSubmit() {    
            this.$refs.infoForm.validate((valid) => {
                if(valid) {
                    this.$post('m/add/about/us',this.infoForm).then(res => {
                        if(res.errCode == 200) {
                            this.$message({
                                message: res.errMsg,
                                type: 'success'
                            });
                            this.$router.push('/aboutus/aboutlist');
                        } else {
                            this.$message({
                                message: res.errMsg,
                                type:'error'
                            });
                        }
                    });
                }
            });
        }
    },
    components: {
        quillEditor
    }
}
</script>