CKEditor 5 - 在提及中使用 HTML

Question

我一直在使用 CKEditor 5 中的提及来标记某些系统变量。典型的标签如下所示:

<span contenteditable="false" class="mention document_variable" style="color:var(--ck-color-mention-text);" data-mention="#ApprovedCosts" data-documentid="185" data-version="-1" data-container="#Variable-tab-textarea" href="javascript:void(0)">
    #ApprovedCosts
</span>

当我尝试呈现以下内容时(想法是在用户单击预览时显示变量值，而他继续编辑):

<span contenteditable="false" class="mention document_variable" style="color:var(--ck-color-mention-text);" data-mention="#ApprovedCosts" data-documentid="185" data-version="-1" data-container="#Variable-tab-textarea" href="javascript:void(0)">
    <p>Nice rendered <b>html</b></p>
</span>

CKEditor 疯了。
我的要求是在标签内显示一个格式良好的变量名。我知道我可以通过 CSS 进行控制，但在某些情况下，我可能最终会渲染一个小表格(如果变量指向一个数据集)等。
帮助将不胜感激。
干杯。

Answer 1

一般来说，CKEditor 5 文档避免使用您的基本纯 HTML 方法，如 comments 中所示。 :

This plugin customizes the way mentions are handled in the editor model and data. Instead of a classic <span class="mention"></span>,

在他们的 mentions documentation 内(顺便说一句，强烈建议看一看 - 它有很多有用的例子，以防万一你被卡住了!)，他们正在定义一个 ClassicEditor(准确地说，他们想模仿一个聊天平台您可以标记用户并收到用户列表作为返回)。

ClassicEditor
    .create( document.querySelector( '.chat__editor' ), {
        extraPlugins: [ Essentials, Paragraph, Mention, MentionLinks, Bold, Italic, Underline, Strikethrough, Link ],
        toolbar: {
            items: [
                'bold', 'italic', 'underline', 'strikethrough', '|', 'link', '|', 'undo', 'redo'
            ]
        },
        mention: {
            feeds: [
                {
                    marker: '@',
                    feed: [
                        { id: '@cflores', avatar: 'm_1', name: 'Charles Flores' },
                        [...]
                    ],
                    itemRenderer: customItemRenderer
                    [...]

创建提及对象后，他们调用 customItemRenderer功能。这种基础设施几乎可以被复制。对于您而言，函数 MentionLinks很重要，因为您可以自定义提及的处理方式，即让我们看一下他们的示例:

function MentionLinks( editor ) {
   editor.conversion.for( 'upcast' ).elementToAttribute( {
        view: {
            name: 'a',
            key: 'data-mention',
            classes: 'mention',
            attributes: {
                href: true
            }
        },
        model: {
            key: 'mention',
            value: viewItem => editor.plugins.get( 'Mention' ).toMentionAttribute( viewItem )
        },
        converterPriority: 'high'
    } );

基本上，您可以自定义 MentionLinks 中的所有属性。功能。 CKEditor 5 很好地记录了 mention插件非常分层:
文档可以在 here 中找到.

在一个轻微的题外话中，我注意到您的代码段落 <p>Nice rendered <b>html</b><p>包含很少的形式问题，即您需要关闭 <p>通过分配关闭标签来标记 </p> :

<p>Nice rendered <b>html</b></p>

尽管我很确定这不是错误，因为您通常在谈论 HTML 而不仅仅是这段代码。