<template>

    <div ref="editorEl" style="text-align:left;width:600px;"></div>

</template>

<script>
import EditorPlugin from "wangeditor";
export default {
    props:{
    },
    data(){
        return{
            htmlcont : this.$attrs.value || "",
        }
    },
    mounted(){
        this.$nextTick(function(){
            this.initEditor();
        })
    },
    computed: {
    },
    methods:{
        clearVal(){
            this.actId="";
        },
        valchange(){
            this.$emit('input',this.htmlcont);
            this.$emit("change");
        },
        initEditor: function() {
            if(!this.$refs.editorEl) return;;
            var editor = new EditorPlugin(this.$refs.editorEl);
            // 编辑器的事件，每次改变会获取其html内容
            editor.customConfig.onchange = html => {
                this.htmlcont = html;
                this.valchange();
                // this.catchData(this.curForm.gameDesc); // 把这个html通过catchData的方法传入父组件
            };
            editor.customConfig.menus = [
                // 菜单配置
                'foreColor', // 文字颜色
                'bold', // 粗体
                'italic', // 斜体
                'undo', // 撤销
                'redo' // 重复
            ];
            editor.customConfig.colors = [ 
                '#ff0000', 
                '#0000ff', 
                '#1c487f',
                '#c24f4a', 
                '#8baa4a', 
                '#7b5ba1',
                 '#46acc8',
                 '#f9963b',
                 '#ffffff' 
                ];
            editor.create(); // 创建富文本实例
            editor.txt.html(this.htmlcont);
        },
    }
}
</script>

<style lang="less">
</style>