使焦点在 CKEditor 5 createElement 中起作用

Question

所以我有一个呈现自定义组件的自定义小部件。

conversion.for('editingDowncast').elementToElement({
    model: 'modelName',
    view: (modelElement, viewWriter) => {
      const modelName = modelElement.getAttribute('modelName');
      const modelNameView = viewWriter.createContainerElement('span', {
        class: 'modelName',
        'data-modelName': modelName,
      });

      const reactWrapper = viewWriter.createUIElement(
        'span',
        {
          class: 'modelName__react-wrapper',
        },
        function (this, domDocument) {
          const domElement = this.toDomElement(domDocument);

          rendermodelName(modelName, domElement);

          return domElement;
        },
      );

      viewWriter.insert(
        viewWriter.createPositionAt(modelNameView, 0),
        reactWrapper,
      );

      return toWidgetEditable(modelNameView, viewWriter);
    },
  });

rendermodelName 将返回一个带有简单输入框的 React 组件

return (
    <div>
      <input type="text" />
    </div>
  );

https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/react.html.

但问题是，每当我尝试在输入中添加一些内容时，焦点就会从字段中丢失并自动移动到周围的编辑器中。我错过了什么。尝试创建一个焦点处理程序并将modelNameView 添加到其中。

我应该使用新的createRawElement 吗？我目前的 CK5 是 20.0.0 所以我不希望现在有任何重大变化。

编辑： 我研究了一点。好像createRawElement 在这里可能行不通。我认为这没有一个简单的解决方案。我尝试使用allowContentOf: '$block'，这也让我无法集中注意力。但是这些值是针对普通 CK 小部件的，而不是针对 react 组件的。

Answer 1

我遇到了类似的问题。

CKEditor 将获取您在 Widget 上托管的 React 组件上的所有事件。

解决方法是停止将事件传播到 CKEditor，这些事件是从您的 React 组件托管的 DOM 元素 (domElement) 触发的。

下面是示例代码： https://github.com/ckeditor/ckeditor5-core/compare/proto/input-widget#diff-44ca1561ce575490eac0d660407d5144R239

您应该停止所有必需的事件。此外，您不能在 React 组件的输入字段中粘贴任何内容。这也将被 CKEditor 的clipboardInput 事件监听。

Answer 2

我遇到了同样的问题，并通过将此标记添加到包装我的 Vue 组件的父 div 来解决它。

https://ckeditor.com/docs/ckeditor5/latest/framework/guides/deep-dive/ui/widget-internals.html#exclude-dom-events-from-default-handlers

从 CKE 文档添加：

有时阻止默认处理程序处理事件可能很有用，例如在小部件的 UIElement 中使用 React 组件，默认情况下，小部件本身想要控制一切。为了使它成为可能，唯一要做的就是向一个元素或其祖先添加一个 data-cke-ignore-events 属性，然后由该元素的任何子级触发的所有事件都将在默认处理程序中被忽略。

让我们看一个简短的例子：

<div data-cke-ignore-events="true">
    <button>Click!</button>
</div>

在上面的从按钮调度的模板事件中，它被放置在包含data-cke-ignore-events属性的内部，将被默认事件处理程序忽略。