ckeditor5
ckeditor5 copied to clipboard
Event-based API doesn't upcast HTML tag
Hello. I have this HTML block which is correctly exporting from CKEditor mentions plugin.
<pt_mention class="mention" data-type="mention" data-mention="@Sample User" data-user-id="000" href="/users/000">@=Sample User</pt_mention>
I want to convert it back to CKEditor, so I tried to write a dispatcher using event-based API.
editor.data.upcastDispatcher.on('element:pt_mention', (evt, data, conversionApi) => {
console.log('Upcast started');
const {
consumable,
writer,
safeInsert,
updateConversionResult
} = conversionApi;
const { viewItem } = data;
const mentionClass = { name: true, classes: 'mention' };
if (!consumable.test(viewItem, mentionClass)) {
return;
}
const modelElement = writer.createElement('span', {
'class': 'mention',
'data-mention': viewItem.getAttribute('data-mention')
});
if (!safeInsert(modelElement, data.modelCursor)) {
console.log("error")
return;
}
modelElement.textContent = viewItem.getTextContent();
consumable.consume(viewItem, mentionClass);
updateConversionResult(modelElement, data);
});
But it keeps logging "error" to console, doesn't handle any attributes and creates <p> tag which only contains text.
The result should look like <span class="mention" .... >
So, what I'm doing wrong and how it should be implemented?
Thanks in advance!