Ckeditor 使焦点在CK Editor 5 createUIElement中工作

所以我有一个自定义小部件，它呈现一个自定义组件

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>
  );

返回(
);

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

modelNameView

我应该使用新的

createRawElement

？我目前的CK5是20.0.0，所以我不希望现在有任何突破性的变化

编辑：

---

我做了更多的研究。似乎

createRawElement

在这里可能不起作用。我认为这不是一个简单的解决方案。我尝试了

allowContentOf:“$block”

，这也让我无法集中精力。但是这些值是针对普通CK小部件的，而不是针对react组件的。

我遇到了类似的问题

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);
    },
  });

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

解决方法是停止将事件传播到CKEditor，这些事件是从React组件所在的DOM元素（

DomeElement

）激发的

以下是示例代码：

---

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

clipboardInput

事件收听。

这很有效。我想也许我也应该抓到

剪贴簿输入
。悬赏这个答案。不希望在10天内得到更多答案。单击无法使用此方法。让我知道如果有人找到一个解决方案，使点击工程