我如何在ckeditor5小部件内为输入创建可编辑标签？

Question

这是我尝试生成的一些示例HTML：

<div>
    <input type="checkbox" id="checkbox_1" name="checkbox_1" />
    <label for="checkbox_1"></label>
</div>

这是我的垂头丧气的转换器：

conversion.for( 'downcast' ).elementToElement( {
    model: 'checkbox',
    view: ( modelElement, viewWriter ) => {
        const div = viewWriter.createContainerElement( 'div', {} );
        const input = viewWriter.createEmptyElement( 'input', {'type': 'checkbox'} );
        const label = viewWriter.createEditableElement( 'label', {} );

        viewWriter.insert( viewWriter.createPositionAt( div, 0 ), input );
        viewWriter.insert( viewWriter.createPositionAt( div, 1 ), label );
        return toWidgetEditable( div, viewWriter );
    }
} );

在CKEditor 5检查器中，我可以看到视图是这样呈现的：

<div contenteditable="true" class="ck-editor__editable ck-editor__nested-editable">
    <input type="checkbox" />
    <label>
    </label>
</div>

在编辑器中，我无法将文本添加到标签或周围的div。

如果将div声明从createContainerElement更改为createEditableElement，则可以在div中插入文本，但仍然无法编辑标签。

如何设置转换器，以便在<input>上贴上可编辑的标签？我尝试查看todolist中的ckeditor5-list代码，但它根本不使用conversion.for或elementToElement，所以我有点迷路。

Answer 1

您发布的代码不正确，因为您无法从头开始创建这样的视图元素。如果它们应该是可编辑的，则需要将它们映射到模型中的某些内容。除非这被认为是不可编辑的区域。在这种情况下，请不要将toWidget()用作toWidgetEditable()。

第二个问题是在编辑器中使用可聚焦字段必须非常小心。这些元素必须在小部件的不可编辑部分内，此外，您还需要停止编辑器处理它们上的事件。目前，这只能通过黑客来实现：

// Hack needed to make the input fields accessible and responsive when used in a widget.
function preventCKEditorHandling( domElement, editor ) {
    // Prevent the editor from listening on below events in order to stop rendering selection.
    domElement.addEventListener( 'click', stopEventPropagationAndHackRendererFocus, { capture: true } );
    domElement.addEventListener( 'mousedown', stopEventPropagationAndHackRendererFocus, { capture: true } );
    domElement.addEventListener( 'focus', stopEventPropagationAndHackRendererFocus, { capture: true } );

    // Prevents TAB handling or other editor keys listeners which might be executed on editors selection.
    domElement.addEventListener( 'keydown', stopEventPropagationAndHackRendererFocus, { capture: true } );

    function stopEventPropagationAndHackRendererFocus( evt ) {
        evt.stopPropagation();
        // This prevents rendering changed view selection thus preventing to changing DOM selection while inside a widget.
        editor.editing.view._renderer.isFocused = false;
    }

参见：https://github.com/ckeditor/ckeditor5-core/compare/proto/input-widget#diff-44ca1561ce575490eac0d660407d5144R239