ckeditor5 MentionCustomization无法读取未定义的属性'createAttributeElement'

问题描述

我（几乎）成功地遵循了本教程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）时，当向下转换功能运行时，出现错误无法读取未定义的属性'createAttributeElement'。有问题的未定义对象是传递到视图中的编写器。

任何人都可以建议从这里去哪里。许多小时后，我已经空白了。其他所有功能均正常工作-只是此自定义功能无效。我已经完全按照给出的示例复制了代码。

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）