Question

我在这样的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

我在此tutorial之后定义了小部件。适当的html元素被正确识别为小部件，一切正常，直到模糊＆＃39;事件被解雇了。重新渲染组件后，小部件＆＃39;不再调用upcast函数，html元素不再成为小部件。

我认为我可以在checkWidgets方法中使用initOnAll和componentDidUpdate等方法，但它们仅适用于.cke_widget_new类的小部件候选。据我所知，上传发生在数据（html）处理阶段，看起来编辑器在重新渲染DOM后不会再次处理html。我该怎么办？谢谢！

更新：最终oleq的解决方案对我有用。我补充说：

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

唯一的问题是这个（可能是任何其他）解决方案不适用于blur事件，这是一个糟糕的事件选择，因为它也是在用户添加窗口小部件之前触发的按下按钮。我用另一个似乎至少对我有用的事件取代了这个事件。

Answer 1

您可以使用此处记录的editor.widgets.checkWidgets（）：

https://docs.ckeditor.com/ckeditor4/latest/api/CKEDITOR_plugins_widget_repository.html

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

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

如何在DOM重新渲染后触发CKEditor的小部件向上翻转功能？

1 个答案: