element-ui + el-dialog + Vue.component 注册的tinymce富文本控件 第二次及以后打开dialog出现问题解决方法

 

Vue.component('my-tinymce', {
    props: ['value'],
    data(){
        return{
            flag:true
        }
    },
    watch:{
        value(val){
            //console.log(val);
            if(this.flag){
                tinymce.activeEditor.setContent(val);
            }
            this.flag = true;
        }
    },
    mounted: function(){
        const self = this;
        tinymce.init({
            target: this.$el.children[0],
            //theme: 'modern',//inlite mobile modern
            language: "zh_CN",
            menubar: false,
            branding: false,
            valid_elements: "p[style],span[style],ul,ol,li,strong/b,em,h1,h2,h3,h4,h5,h6",
            valid_style: {
                "*":"color,font_size,text-align,line-height"
            },
            plugins: [ //配置插件：可自己随意选择，但如果是上传本地图片image和imagetools是必要的
                'advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker',
                'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
                'save table contextmenu directionality emoticons template paste imagetools textcolor'
            ],
            /*表情 emoticons*/
            toolbar: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | preview media fullpage | forecolor backcolor | code fullscreen | formatselect | table',
            // images_upload_url:basePath()+'/platform/res/upload/img',
            // images_upload_base_path:'',
            // images_upload_credentials:true,
            setup: function(editor) {
                editor.on('input undo redo execCommand', function(e) {
                    self.flag = false;
                    self.$emit('input', editor.getContent());
                });
            },
            images_upload_handler: function (blobInfo, success, failure) {
                //console.log(blobInfo);
                //console.log(success);
                //console.log(failure);
                let formData = new FormData();
                formData.append('file', blobInfo.blob(), blobInfo.filename());
                $.ajax({
                    url : basePath()+'/platform/res/upload/img',
                    type : "POST",
                    data : formData,
                    cache : false,
                    async : true,
                    contentType : false, // 这两句需要添加上，否则会跳转页面
                    processData : false,
                    dataType : "json",
                    success : function(obj) {
                        if(obj.code == 0){
                            console.log(obj.data.location);
                            success(obj.data.location);
                        }else{
                            failure('上传出错了');
                        }
                    },
                    error : function () {
                        failure('上传出错了，图片限制上传最大为2M');
                    }
                });
            }
        });
    },
    updated(){

    },
    created(){

    },
    destroyed(){

    },
    template: '<div><textarea style="height:300px" v-model="value"></textarea></div>'
});

 

自定控件 添加属性  v-if="dialogVisible"  或者使用element-ui较新的话可以在在el-dialog 标签上添加 :destroy-on-close="true"  关闭时dialog销毁dialog内的控件

<el-dialog title="" :visible.sync="dialogVisible" :append-to-body="true">
    <my-tinymce v-model="data" v-if="dialogVisible"></my-tinymce>
</el-dialog>

 这样设置是为了关闭dialog时销毁my-editor控件，不销毁的话会出现问题的