使焦点在CK编辑器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>
  );

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

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

我应该使用新的createrawElement吗？我当前的CK5是20.0.0，所以我现在不想有任何重大更改。

编辑：我研究了一些。似乎createrawElement在这里可能无法正常工作。我认为这没有简单的解决方案。我尝试了allowContentOf: '$block'，但也没有让我集中精力。但是这些值明确地用于普通CK小部件，而不是用于React组件。

解决方法

我遇到了类似的问题。

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

解决方法是停止从您的React组件所在的DOM元素（domElement）触发的事件传播到CKEditor。

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

您应该停止所有必需的事件。同样，您不能在React组件的输入字段内粘贴任何内容。 CKEditor的clipboardInput事件也会监听该事件。

ckeditor ckeditor ckeditor ckeditor5