vue中老版本Tinymce编辑器自适应高_tinymceeditor 自适应高度-优快云博客

本文介绍了一种在使用TinyMCE富文本编辑器时遇到的问题及解决方案：通过添加额外的div容器并调整内部iframe的高度来确保编辑器正确显示。同时实现了数据变化监听，确保高度始终与内容相匹配。

因为赶时间，项目用的是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 节点不断发生变化，节点替换频繁，所以要每次重新获取节点

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