vue中如何在watch监听中新增tinymce的撤销?

tinymce.undoManager.add()
tinymce.undoManager.transact()

我知道以上两个命令是记录用户操作用于回滚的方法
在我的项目中需要监听 App.vue 传递过来的值从而替换编辑器中的展示的文档(dom)
所以我将 tinymce 运行在了 watch 中,代码如下:

<script setup>
import tinymce from 'tinymce/tinymce' // tinymce 默认 hidden,不引入则不显示编辑器
import Editor from '@tinymce/tinymce-vue'

watch(() => {
  return props.propChild
}, (val) => {
  console.log('子组件接收', val)
  switch (val.edit) {
    case 'click':
      tinymce.activeEditor.getBody().querySelector('#' + val.id).scrollIntoView()
      break
    case 'edit':
      tinymce.activeEditor.getBody().querySelector('#' + val.id).innerText = val.idName
      tinymce.undoManager.add()
      // tinymce.undoManager.transact()
      break
  }
}, {
  deep: true
})
</script>

但是在项目运行后,页面报错

tinymce.activeEditor.getBody().querySelector('#' + val.id).scrollIntoView() // 可以执行
tinymce.activeEditor.getBody().querySelector('#' + val.id).innerText = val.idName // 可以执行
tinymce.undoManager.add() // TypeError: Cannot read properties of undefined (reading 'add')
tinymce.undoManager.transact() // TypeError: Cannot read properties of undefined (reading 'transact')

请问是为什么呢?

阅读 1.4k
2 个回答

经查询,实际节点应该是 tinymce.activeEditor.undoManager

错误不是已经说明了——tinymce.undoManagerundefined;
你大小写错了吧,UndoManager
截屏2024-01-20 01.21.43.png

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题