如何更改ckeditor5中提及插件输出DOM元素

Question

实际产量

<span class="mention" data-mention="@lilypad">@lilypad</span>

尝试过以下，

writer.createUIElement( 'span', null, function( domDocument ) {
 const domElement = this.toDomElement( domDocument );
 domElement.innerHTML = 'this is ui element';
 return domElement;
} );

就像这里提到的 https://ckeditor.com/docs/ckeditor5/latest/api/module_engine_view_writer-Writer.html

editor.conversion.for( 'downcast' ).attributeToElement( { model: 'mention', view: ( modelAttributeValue, { writer } ) => { 
writer.createUIElement( 'span', null, function( domDocument ) {
 const domElement = this.toDomElement( domDocument );
 domElement.innerHTML = 'this is ui element';
 return domElement;
});
}
});

但它不起作用

()

预期产量

<span class="mention mention-parent" data-mention="@lilypad" id="parent-id">@lilypad  

示例文本

Answer 1

请检查相关文档！

完全定制的提及提要

这里他们提到在

itemRenderer: customItemRenderer

数组的对象中使用属性

feeds

。我们可以修改功能以满足您的需求！

function customItemRenderer( item ) {
    const itemElement = document.createElement( 'span' );

    itemElement.classList.add( 'mention-parent' );
    itemElement.id = `mention-list-item-id-${ item.userId }`;
    itemElement.textContent = `${ item.name } `;

    const usernameElement = document.createElement( 'span' );

    usernameElement.classList.add( 'mention-parent' );
    usernameElement.textContent = item.id;

    itemElement.appendChild( usernameElement );

    return itemElement;
}

此演示没有获得所需的输出，但它是解决您的问题的一个很好的起点！