ckeditor5 - CKEditor 5 - Using HTML inside mentions

Question

I have been using mentions in CKEditor 5 to tag certain system variables. A typical tag looks like as:

<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>

When I try to render the following (the idea is to show the variable value when the user clicks preview, while he continues editing):

<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 goes bonkers.

My requirement is to show a nicely formatted variable name inside the tag. I know I can control via CSS, but there could be a situation where I might end-up rendering a small table (if variable points to a data set), etc.

Help will be appreciated.

Cheers.

question from:https://stackoverflow.com/questions/65713716/ckeditor-5-using-html-inside-mentions

Answer 1

Generally speaking, CKEditor 5 documentations refrain from going with your basic plain HTML approach, as seen in the comments:

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

Within their mentions documentation (by the way, highly suggested to take a look at - it's very well documented with lots of useful examples in case you're stuck!), they're defining a ClassicEditor (to be precise, they want to mimic a chat platform in which you can tag a user and will receive a list of users in return).

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
                    [...]

After the mention object is created, they're calling the customItemRenderer function. This infrastructure could nearly identical be copied. For your part the function MentionLinks is important, as you can customize how mentions are handled, i.e. let's take a look at their example:

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'
    } );

Basically, you can customize all the properties within the MentionLinks function. CKEditor 5 did a good job documenting the mention plugin very hierarchically:

The documentation can be found here.

---

On a slight off-topic note I noticed your code passage <p>Nice rendered <b>html</b><p> contains little formality issues, i.e. you need to close the <p> tag by assigning a close tag </p>:

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

Though I'm pretty sure that's not the error as you're talking about HTML in general and not only this code passage.