Reactjs 如何触发CKEditor'；DOM重新渲染后的小部件向上播放功能？

我在React组件中初始化CKEditor，如下所示：

render: () ->
  <div ref="editable" dangerouslySetInnerHTML={{__html: @props.html}} />

componentDidMount: () ->
  @editor = AlloyEditor.editable(@refs.editable, {extraPlugins: AlloyEditor.Core.ATTRS.extraPlugins.value + 'plugins go here'})
  @editor.get('nativeEditor').on('blur', (event) =>
    @props.handleChange())
  //At this point the @props.html changes and the component is re-rendered

---

唯一的问题是这个（可能还有其他）解决方案不适用于

blur

事件，这是一个错误的事件选择，因为它也会在用户按下按钮添加小部件之前触发。我将此事件替换为另一个至少目前对我有效的事件。

您可以使用editor.widgets.checkWidgets（），如下所述：

一般的想法是，它检查文档中的所有小部件，并刷新尚未制作的小部件

---

或者，如果您只想初始化一个有引用的小部件，请使用同一页面上记录的initOn（）。

您可以使用编辑器.widgets.checkWidgets（），如下所示：

一般的想法是，它检查文档中的所有小部件，并刷新尚未制作的小部件

---

或者，如果您只想初始化一个有引用的小部件，请使用同一页面上记录的initOn（）进行初始化。

我不是react人，但据我所知，它收集原始编辑器HTML

editor.editable（）.getHtml（）

（这不是数据！），然后在重新初始化后，将其放回原处，但是所有对元素（也是小部件）的内部编辑器引用都被破坏了，因为它基本上是一个新的树。您是否可以配置React，使其使用

editor.getData（）

收集HTML，然后使用

editor.setData（data）

重新渲染它？然后所有小部件都会自动初始化。非常感谢！这几乎奏效了。唯一的问题是，现在小部件被插入到可编辑元素的最顶端（插入第二个小部件会抛出错误）。我会设法弄清楚为什么会发生这种情况。由

editor.getData（）

返回的

数据

已经在html的其余部分之上有了未来的小部件。我不是react人，但据我所知，它收集原始编辑器html

editor.editable（）.getHtml（）

（这不是数据！），然后在重新初始化之后，它简单地把它放回去，但是所有对元素（也是小部件）的内部编辑器引用都被破坏了，因为它基本上是一个新的树。您是否可以配置React，使其使用

editor.getData（）

收集HTML，然后使用

editor.setData（data）

重新渲染它？然后所有小部件都会自动初始化。非常感谢！这几乎奏效了。唯一的问题是，现在小部件被插入到可编辑元素的最顶端（插入第二个小部件会抛出错误）。我会设法弄清楚为什么会发生这种情况。

editor.getData（）

返回的

data

已经在html的其余部分之上有了未来的小部件。

componentDidUpdate: () ->
  data = @editor.get('nativeEditor').getData()
  @editor.get('nativeEditor').setData(data)