ckeditor5 - ckeditor5 MentionCustomization 无法读取未定义的属性“createAttributeElement”

Question

我（几乎）成功地遵循了本教程https://ckeditor.com/docs/ckeditor5/latest/features/mentions.html。从https://ckeditor.com/ckeditor-5/online-builder/下载带有 Mention 插件的 CKEditor5 自定义构建后，我成功地提到了自动完成工作（几乎）。

问题：当尝试自定义提及输出（https://ckeditor.com/docs/ckeditor5/latest/features/mentions.html#customizing-the-output）时，我收到错误Cannot read property 'createAttributeElement' of undefined当downcast 函数运行。有问题的未定义对象是被传递到视图中的作者。

谁能建议从这里去哪里。几个小时后我画了一个空白。其他一切都在工作 - 只是不是这个自定义功能。我已经完全从给出的示例中复制了代码。

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

标签： ckeditor5