vue中老版本Tinymce编辑器自适应高

因为赶时间，项目用的是4.8.2的老版本，配置init的方式无效

1.套一层div壳，方便定位

            <div class="tinymces">
                <Tinymce v-model="dialogData"></Tinymce>
            </div>

2.获取节点后获取唯一ifram，并让其高等于其中加载的html的高，由于ifram加载本地组件异步，所以延时获取节点(延长时间自调)

import Tinymce from "./main/common/Tinymce";
export default {
    data() {
        return {
            dialogData:'123'
        };
    },
    components: { Tinymce },
    methods: {
        EditorOnsize() {
            let ifram = document.querySelector(".tinymces").querySelector("iframe");
            ifram.style.height = ifram.contentDocument.documentElement.offsetHeight + 'px';
        },
    },
    mounted() {
        setTimeout(this.EditorOnsize, 200);
    },
};

3.监听 绑定的数据变化 重复触发

import Tinymce from "./main/common/Tinymce";
export default {
    data() {
        return {
            dialogData:'123'
        };
    },
    watch:{
        dialogData(newval){
            this.dialogData = newval
            this.EditorOnsize()
        }
    },
    components: { Tinymce },
    methods: {
        EditorOnsize() {
            let ifram = document.querySelector(".tinymces").querySelector("iframe");
            ifram.style.height = ifram.contentDocument.documentElement.offsetHeight + 'px';
        },
    },
    mounted() {
        setTimeout(this.EditorOnsize, 200);
    },
};

因为调试过程中 ifram 节点不断发生变化，节点替换频繁，所以要每次重新获取节点

有时间还是把这部分重构了吧。。除非这项目就碰一次