Custom mention processing

[mariusrak]

Hi, I would like to define how should data from feed array translated into HTML code/DOM elements. Same as it is possible to define custom itemRenderer I would expect to define some itemConverter (e.g.). Currently it seems that it's half possible by creating plugin MentionCustomization but this solution is too much overhead and error prone. Similar plugin for CKE4 allowed to define outputTemplate which seems like simpler solution compared to CKE5 but still not so flexible as it would be with a function.

[Mgsy]

cc @jodator

[jodator]

Hi @mariusrak! The CKEditor 5 has different philosophy then CKEditor 4. We tend to give more flexibility by exposing APIs rather then making everything in the config. You can create you own [plugin that will override default conversion process for mention attribute](https://ckeditor.com/docs/ckeditor5/latest/features/mentions.html#customizing-the-output).

[mariusrak]

But this way it seems like incomplete solution. Currently it is hardcoded to some predefined field which have to render in certain way. Yeah, it is less complex solution, but covers mentions only if it's done on a compatible system, if not, too much conversion are needed which adds complexity to final program and I think that it is worse scenario.

Now I need to convert my items to specific form which is not quite intuitive. Then it is converrted to some form which is arbitrarily defined by plugin authors. And this arbitrary form I need to convert to what I need to use and back to the arbitrary form.

There's too much hardcoded stuff a too much arbitrarity in the plugin.

[tiennguyen0494]

Dear @jodator I want to display an element: <a class="mention" data-mention="@Ted" data-user-id="5" href="https://www.imdb.com/title/tt0460649/characters/nm1102140" ><img src="https://via.placeholder.com/32x32"> @tdog</a> Please help me.

[jodator]

@tiennguyen0494 please see my comment above: https://github.com/ckeditor/ckeditor5/issues/4658#issuecomment-489547890 I think that there's everything you'd need to implement this.

[tiennguyen0494]

@jodator you can see here: editor.conversion.for('downcast').attributeToElement({ model: 'mention', view: (modelAttributeValue, { writer }) => { if (!modelAttributeValue) { return; }

        var linkElement = writer.createAttributeElement('a', {
            class: 'mention',
            'data-mention': modelAttributeValue.id,
            'data-user-id': modelAttributeValue.userId
        }, {
            priority: 20,
            id: modelAttributeValue.uid
        });

        return linkElement;

    },
    converterPriority: 'high'
});

It only replaces <span> tag to <a> tag, I want to add a nested element like <a...><img...></a>

[eldiyar312]

@jodator you can see here: editor.conversion.for('downcast').attributeToElement({ model: 'mention', view: (modelAttributeValue, { writer }) => { if (!modelAttributeValue) { return; }

        var linkElement = writer.createAttributeElement('a', {
            class: 'mention',
            'data-mention': modelAttributeValue.id,
            'data-user-id': modelAttributeValue.userId
        }, {
            priority: 20,
            id: modelAttributeValue.uid
        });

        return linkElement;

    },
    converterPriority: 'high'
});

It only replaces tag to tag, I want to add a nested element like <a...><img...>

also i have same problem, i need insert html into mention

[CKEditorBot]

There has been no activity on this issue for the past year. We've marked it as stale and will close it in 30 days. We understand it may still be relevant, so if you're interested in the solution, leave a comment or reaction under this issue.

[CKEditorBot]

We've closed your issue due to inactivity. We understand that the issue may still be relevant. If so, feel free to open a new one (and link this issue to it).