获取CKEditor 5中type的所有元素

Question

我的编辑器包含自定义元素，创建方式如下：

this.editor.model.change( writer => {
    const id = `a${ Math.random().toString().replace('.', '') }`;

    const autocomplete = writer.createElement( 'autocomplete', { 'data-id': id );

    this.editor.model.insertContent( autocomplete );
} );

我想稍后在我的插件中获取所有 'autocomplete' 元素，以便我可以阅读它们的内容（它们是可编辑的元素）。

编辑器的模型有没有类似querySelectorAll('autocomplete')的东西？

Answer 1

可以使用 range.getWalker。

const findNodes = function(writer, type, root) {
    const nodes = [];
    const range = writer.createRangeIn( root );

    for ( const value of range.getWalker({ ignoreElementEnd: true }) ) {
        const node = value.item;

        if ( node.is( type ) ) {
            nodes.push(node);
        }
    }

    return nodes;
};

this.editor.model.change( writer => {
    const autocompletes = findNodes(writer, 'autocomplete', this.editor.model.document.getRoot());
} );

获取CKEditor 5中type的所有元素

Get all elements of type in CKEditor 5

ckeditor

ckeditor5