I have (almost) successfully followed this tutorial https://ckeditor.com/docs/ckeditor5/latest/features/mentions.html. After downloading a custom build of CKEditor5 with the Mention plugin from https://ckeditor.com/ckeditor-5/online-builder/ I successfully got mention auto complete working (almost).
Problem: When trying to customize the mention output (https://ckeditor.com/docs/ckeditor5/latest/features/mentions.html#customizing-the-output) I get the error Cannot read property 'createAttributeElement' of undefined when the downcast function runs. The undefined object in question is the writer being passed into the view.
Can anyone suggest where to go from here. I have drawn a blank after many hours. Everything else is working - just not this customization function. I have copied the code exactly from the example given.
editorConfig = {
extraPlugins: [MentionLinks],
placeholder: 'Start typing your notes here.',
table: {
contentToolbar: [
'tableColumn',
'tableRow',
'mergeTableCells',
'tableCellProperties',
'tableProperties'
]
},
image: {
toolbar: [
'imageStyle:full', 'imageStyle: side', 'imageStyle:alignLeft', 'imageStyle:alignCenter', 'imageStyle:alignRight',
'|',
'imageResize',
'|',
'imageTextAlternative',
'|',
'linkImage'
],
styles: [
'full',
'side',
'alignLeft',
'alignCenter',
'alignRight'
],
resizeOptions: [
{
name: 'imageResize:original',
label: 'Original',
value: null
},
{
name: 'imageResize:50',
label: '50%',
value: '50'
},
{
name: 'imageResize:75',
label: '75%',
value: '75'
}
]
},
toolbar: {
items: [
'undo',
'redo',
'heading',
'|',
'fontFamily',
'fontSize',
'fontBackgroundColor',
'fontColor',
'highlight',
'|',
'bold',
'italic',
'underline',
'strikethrough',
'|',
'bulletedList',
'numberedList',
'todoList',
'|',
'indent',
'outdent',
'alignment',
//'|',
//'horizontalLine',
//'pageBreak',
//'|',
'imageUpload',
'blockQuote',
'insertTable',
'|',
'link',
//'superscript',
//'subscript',
//'|',
'mediaEmbed',
//'|',
'exportPdf'
]
},
mention: {
feeds: [
{
marker: '@',
feed: this.feedUsers,
// itemRenderer: this.customItemRenderer
},
{
marker: '#',
feed: getFeedItems
}
]
}
};
/*
* This plugin customizes the way mentions are handled in the editor model and data.
* Instead of a classic <span class="mention"></span>,
*/
function MentionLinks( editor ) {
// The upcast converter will convert a view
//
// <a href="..." class="mention" data-mention="...">...</a>
//
// element to the model "mention" text attribute.
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'
} );
// Downcast the model "mention" text attribute to a view
//
// <a href="..." class="mention" data-mention="...">...</a>
//
// element.
editor.conversion.for( 'downcast' ).attributeToElement( {
model: 'mention',
view: ( modelAttributeValue, { writer } ) => {
debugger;
// Do not convert empty attributes (lack of value means no mention).
if ( !modelAttributeValue ) {
return;
}
let href;
// User mentions are downcasted as mailto: links. Tags become normal URLs.
if ( modelAttributeValue.id[ 0 ] === '@' ) {
href = `mailto:${ modelAttributeValue.id.slice( 1 ) }@example.com`;
} else {
href = `https://example.com/social/${ modelAttributeValue.id.slice( 1 ) }`;
}
return writer.createAttributeElement( 'a', {
class: 'mention',
'data-mention': modelAttributeValue.id,
href
}, {
// Make mention attribute to be wrapped by other attribute elements.
priority: 20,
// Prevent merging mentions together.
id: modelAttributeValue.uid
} );
},
converterPriority: 'high'
} );
}