编辑不同职位时富文本框内容在第一次赋值之后不再变化。 去看了tinymce的源码发现监听文本内容变化之前加了!this.hasChange && this.hasInit 判断。 但我编辑的文本框在第一次加载初始化之后改变了this.hasChange的值为true,编辑切换只是控制css隐藏显示样式,所以改变编辑框时不会触发初始化函数,hasChange的值始终为true.
这个时候我们注释watch内监听函数的判断可以解决这个问题,但是文本输入我们发现变成了倒序。
于是发现初始化执行的函数editor在每次用户输入时先获取了文本内容赋值因此变成倒序,注释这段代码,watch函数恢复。发现显示可以正常显示了,但修改的值没有赋值。因为没有触发getContent()函数。
最终解决方案,在引用富文本组件的代码加v-if,控制dom的加载:(dialogFormVisible为true时加载富文本组件,false时销毁dom)
源代码:
watch: {
value(val) {
if (!this.hasChange && this.hasInit) {
this.$nextTick(() =>
window.tinymce.get(this.tinymceId).setContent(val || ''))
}
}
}
window.tinymce.init({
selector: `#${this.tinymceId}`,
language: this.languageTypeList['en'],
height: this.height,
body_class: 'panel-body ',
object_resizing: false,
toolbar: this.toolbar.length > 0 ? this.toolbar : toolbar,
menubar: this.menubar,
plugins: plugins,
end_container_on_empty_block: true,
powerpaste_word_import: 'clean',
code_dialog_height: 450,
code_dialog_width: 1000,
advlist_bullet_styles: 'square',
advlist_number_styles: 'default',
imagetools_cors_hosts: ['www.tinymce.com', 'codepen.io'],
default_link_target: '_blank',
link_title: false,
nonbreaking_force_tab: true, // inserting nonbreaking space need Nonbreaking Space Plugin
init_instance_callback: editor => {
if (_this.value) {
editor.setContent(_this.value)
}
_this.hasInit = true
editor.on('NodeChange Change KeyUp SetContent', () => {
this.hasChange = true
this.$emit('input', editor.getContent())
})
},
setup(editor) {
editor.on('FullscreenStateChanged', (e) => {
_this.fullscreen = e.state
})
}
})