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

本文主要是介绍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 = newvalthis.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 节点不断发生变化，节点替换频繁，所以要每次重新获取节点

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

这篇关于vue中老版本Tinymce编辑器自适应高的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---