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);
},
});
WhererendermodelName
将返回一个带有简单输入框的 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'
which 也不让我集中注意力。但是这些值是针对普通 CK 小部件的,而不是针对反应组件的。
解决方案
我遇到了类似的问题。
CKEditor 将获取您在 Widget 上托管的 React 组件上的所有事件。
解决方法是停止将事件传播到 CKEditor,这些事件是从您domElement
的 React 组件托管的 DOM 元素()触发的。
您应该停止所有必需的事件。此外,您不能在 React 组件的输入字段中粘贴任何内容。这也将被clipboardInput
CKEditor 的事件监听。
推荐阅读
- javascript - 在保持纵横比的同时计算一行中的图像数量以适应容器
- xml - Google 表格 ImportXML 返回的内容为空
- c# - 关闭child的子窗体会导致父窗体出错
- html - Angular 8 ngIf 在 false 时创建空元素
- bash - 如何在 shell 脚本中的 CSV 文件中插入数据库列名
- python - Python函数定义变量失败
- flutter - Flutter如何通过平台视图将触摸事件传递给另一个
- hadoop - 如何从 Ambari 为 Hadoop 中的 Namenode 和 Datanode 启用 JMX 端口
- java - Spring 中的 @Scheduled 注解
- swift - 集合视图控制器不会使单元格出列 - SWIFT