<template>
<!--    <vue-ueditor-wrap v-model="myContent" :config="myConfig" @ready="ready"></vue-ueditor-wrap>-->
    <editor v-model="myContent" :init="editorInit" :disabled="editable=='false'?true:false"
            api-key="9x6zb275576wrbyxmoxx5b6xxg1p4ds3e3o5icmkspi1yixi"></editor>
</template>

<script>
    // import VueUeditorWrap  from 'vue-ueditor-wrap';
    import Editor from '@tinymce/tinymce-vue'
    export default {
        name: "pl-ueditor",
        components: {
            Editor
        },
        props:{
            config:{type:Object,default:() => {return {}}}, // UE的配置
            content:{type:String,default:""}, // UE中的内容
            editable:{type:String,default:true},//可编辑
        },
        data () {
            return {
                editorInstance:{}, // 编辑器实例
                myContent:"", // 编辑器中的文本，有标签
                webUrl: "",
                editorInit: {
                    language_url: '/static/tinymce/zh_CN.js',
                    language: 'zh_CN',
                    height: 300,
                    skin_url: '/static/tinymce/skins/ui/oxide',
                    plugins: 'lists textcolor wordcount fullscreen',//插件
                    toolbar: 'undo redo | bold italic underline strikethrough | forecolor backcolor | fontsizeselect formatselect | alignleft aligncenter alignright alignjustify | outdent indent | removeformat | fullscreen',//工具栏
                    branding: false,
                    menubar: '',//菜单栏
                },
            }
        },
        created(){
            this.myContent = this.content;
            let languageUrl = window.FE_CTX.endsWith("/") ? window.FE_CTX : (window.FE_CTX + "/");
            let skinUrl = window.FE_CTX.endsWith("/") ? window.FE_CTX : (window.FE_CTX + "/");
            if (window.location.href.indexOf("/formPath/") !== -1) { // 前端代码集成到后台的路径
              languageUrl += "formPath/static/tinymce/zh_CN.js";
              skinUrl += "formPath/static/tinymce/skins/ui/oxide";
            } else {  // 线上环境的路径
              if(window.PACKAGE_NAME){
                languageUrl += window.PACKAGE_NAME + "/";
                skinUrl += window.PACKAGE_NAME + "/";
              }
              languageUrl += "static/tinymce/zh_CN.js";
              skinUrl += "static/tinymce/skins/ui/oxide";
            }
            this.editorInit["language_url"] = languageUrl;
            this.editorInit["skin_url"] = skinUrl;
            // let obj = {};
            // obj["initialFrameHeight"] = this.config["height"] || '300';
            // obj["initialFrameWidth"] = this.config["width"] || '99.8%';
            // this.myConfig = Object.assign({},this.myConfig,this.config,obj);
        },
        watch:{
            myContent(){
            //     // emit不能传递标签数据，这里暂时使用encodeURI加密该数据，获取时再进行decodeURI解密，
            //     // 后面纯前端的加密工作完成后，再替换为该加密方式
                this.$emit("input",this.myContent);
            },
            // content(){
                // this.myContent = decodeURI(this.content);
            // }
        },
        methods:{
            // ready(editorInstance){
            //     this.editorInstance = editorInstance;
            // },
        }
    }
</script>

<style scoped lang="scss">
/*.tox tox-tinymce .tox-statusbar*/
/deep/ .tox-statusbar__path .tox-statusbar__path-item {//去除富文本编辑 p
  display: none;
}
</style>
