Не удается обновить часть страницы компонента TinyMCE при добавлении нескольких компонентов TinyMCE
Мой код
Компонент TinyMCE
При вызове компонентов TinyMCE
<template>
<div class="app">
<el-row>
<el-col :span="14">
<div class="left" ref="left">
<div>
<mceeditor v-model = "Value"></mceeditor>
Value:{{Value}}
</div>
<div>
<mceeditor v-model = "Value1"></mceeditor>
Value:{{Value1}}
</div>
<div>
<mceeditor v-model = "Value2"></mceeditor>
Value:{{Value2}}
</div>
<div>
<mceeditor v-model = "Value3"></mceeditor>
Value:{{Value3}}
</div>
</div>
</el-col>
<el-col :span="10">
</el-col>
</el-row>
</div>
</template>
<script>
import mceeditor from '@/views/modules/questionManagement/components/mceeditor'
window.tinymce.baseURL = '/static/tinymce'
window.tinymce.suffix = '.min'
export default {
data () {
return {
Value: '',
Value1: '',
Value2: '',
Value3: '',
clientHeight: ''
}
},
components: {
mceeditor
},
mounted () {
// 获取浏览器的可视高度
this.clientHeight = `${document.documentElement.clientHeight}`
window.onresize = function temp () {
this.clientHeight = `${document.documentElement.clientHeight}`
}
},
watch: {
// 如果 `clientHeight` 发生改变,这个函数就会运行
clientHeight: function () {
this.changeFixed(this.clientHeight)
}
},
methods: {
changeFixed (clientHeight) { // 动态修改样式
console.log(clientHeight)
this.$refs.left.style.height = clientHeight - 170 + 'px'
}
}
}
</script>
<style>
.app {
width: 100%;
}
.left {
overflow: scroll;
padding: 1px 2px;
}
</style>
Когда я представляю компоненты TinyMCE, некоторые компоненты не будут отображаться, открываю ли я страницу или обновляю страницу.Я давно не знал, что это вызвано какой-то причиной.Я надеюсь, что каждый может дать ответ.
проблемный интерфейс
проблемный интерфейс