Vue React 中如何重新修改 <Editor> 组件的 defaultContent ？

[wangfupeng1988]

参考文档，V5 用于 Vue 和 React 时，defaultContent 只在初始化 <Editor> 组件时有效，再重新修改 defaultContent 就不起作用了。

<Editor
    defaultConfig={editorConfig}
    defaultContent={[]}
    mode="default"
    style={{ height: '500px' }}
 />

[wangfupeng1988]

第一，defaultContent 只有在编辑器初始化时起作用，后续再修改就不起作用了（就像 React 中的 defaultValue）

第二，这种场景，大多是 ajax 请求数据之后，想要异步修改内容 。这里我建议待 ajax 请求完成之后，再创建编辑器。例如在 Vue React 中，ajax 请求结束之后再创建编辑器

• vue2 https://juejin.cn/post/7030722267264843783#heading-6
• vue3 https://juejin.cn/post/7027977252331585544#heading-6
• react https://juejin.cn/post/7030584414652334093#heading-6

第三，如果你必须要先创建编辑器，然后再重新 rewrite 内容（像 v4 的 txt.html(...)），那 v5 目前的 API 也是支持的，可以去看文档

// 全选内容
editor.select([])
// 删除选中部分
editor.deleteFragment()
// 插入你的内容
SlateTransforms.insertNodes(editor, [
  { type: 'paragraph', children: [{ text: '你的文章内容...' }] },
  { type: 'paragraph', children: [{ text: '你的文章内容...' }] }
])
// 删除第一个空行（按需）
SlateTransforms.removeNodes(editor, { at: [0] })

最后，不建议使用一个编辑器，频繁的切换不同文档。一个编辑器，就服务于一个文档。如果切换文档，那就销毁该编辑器，重建编辑器。

[wangfupeng1988]

补充：wangEditor 内部的 DOM 渲染是自己负责的，一个黑盒，不受 Vue React 的渲染控制。所以 wangEditor 虽然是一个编辑框，但和 <input> <textarea> 完全不一样。

[wangfupeng1988]

我这几天正在开发 Vue 组件 v-model ，以及 React 受控组件。预计 4 月会发布。

[wangfupeng1988]

最新版的 React 组件已经可以使用 value 和 onChange ，可封装受控组件。
https://www.wangeditor.com/v5/guide/for-frame.html#%E4%BD%BF%E7%94%A8