wangeditor富文本回显后禁止编辑后,报错Cannot resolve a DOM node from Slate node: {"text":"模拟 Ajax 异步设置内容 HTML"}?-灵析社区

刘一抗二二

想要的效果就是富文本回显后,禁止修改 效果实现了,但是报错了 `Cannot resolve a DOM node from Slate node: {"text":"模拟 Ajax 异步设置内容 HTML"}` ![image.png](https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241119/19c8a2d5a4bfaacb8c4b6f85f71b9abf.png) 实现方法:通过查文档 ![image.png](https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241119/ea4f30d6a18a7506955a94c2f138e18d.png) 使用`editor.disable()`实现了,但是报错 [wangeditor文档地址](https://link.segmentfault.com/?enc=g78Kd7vNGtFFDIhbdj23IA%3D%3D.8k%2Bj5ks6o%2FRw9lsYH9nGZWfwVRXFIv7awjNxeBOzaDQro03HU9dUEaZDxIA2Ba%2By) 代码 import { Editor, Toolbar } from "@wangeditor/editor-for-vue"; import "@wangeditor/editor/dist/css/style.css"; export default { name: "HelloWorld", components: { Editor, Toolbar }, data() { return { editor: null, html: "hello", toolbarConfig: {}, editorConfig: { placeholder: "请输入内容..." }, mode: "default", // or 'simple' }; }, methods: { onCreated(editor) { this.editor = Object.seal(editor); // 一定要用 Object.seal() ,否则会报错 }, }, mounted() { // 模拟 ajax 请求,异步渲染编辑器 setTimeout(() => { this.html = "模拟 Ajax 异步设置内容 HTML"; this.editor.disable(); }, 1500); }, beforeDestroy() { const editor = this.editor; if (editor == null) return; editor.destroy(); // 组件销毁时,及时销毁编辑器 }, };

阅读量:24

点赞量:0

问AI
猜测与页面重新渲染有关 你可以尝试在重新渲染dom元素后挂载钩子函数后再禁用编辑器 mounted() { // 模拟 ajax 请求,异步渲染编辑器 setTimeout(() => { this.html = "模拟 Ajax 异步设置内容 HTML"; this.$nextTick(() => { this.editor.disable(); }) }, 1500); },