如何解决使焦点在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。
您应该停止所有必需的事件。同样,您不能在React组件的输入字段内粘贴任何内容。 CKEditor的clipboardInput
事件也会监听该事件。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。