CKEditor 提及自定义输出失败的插件 Angular 9

Question

我让 Ckeditor 使用我的 Angular 应用程序，我最初使用的是 Angular 7。我使用他们的在线构建器而不是使用 ckeditor classic 构建了编辑器。我正在使用 mentions plugin 并自定义输出，以便我在带有我需要的数据的标签中提及我而不是带有提及名称的跨度。

更新到 Angular 9 后，编辑器和提及仍然有效，但如果我使用自定义输出，它会失败。

如果我使用自定义输出，这就是我得到的错误。

core.js:6241 ERROR Error: Uncaught (in promise): TypeError: t is not a constructor
TypeError: t is not a constructor
at ckeditor.js:1978
at Array.map (<anonymous>)
at w (ckeditor.js:1978)
at wa.init (ckeditor.js:1947)
at PF.initPlugins (ckeditor.js:10026)
at ckeditor.js:12377
at new ZoneAwarePromise (zone-evergreen.js:960)
at Function.create (ckeditor.js:12377)
at CKEditorComponent.<anonymous> (ckeditor-ckeditor5-angular.js:232)
at Generator.next (<anonymous>)
at resolvePromise (zone-evergreen.js:798)
at resolvePromise (zone-evergreen.js:750)
at zone-evergreen.js:860
at ZoneDelegate.invokeTask (zone-evergreen.js:399)
at Object.onInvokeTask (core.js:41675)
at ZoneDelegate.invokeTask (zone-evergreen.js:398)
at Zone.runTask (zone-evergreen.js:167)
at drainMicroTaskQueue (zone-evergreen.js:569)
at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:484)
at invokeTask (zone-evergreen.js:1621)

这就是我配置编辑器的方式。

    import * as Editor from '@assets/ckeditor5/build/ckeditor';

export class CkeditorComponent {
  public editor = Editor;
  editorConfig = {
    extraPlugins: [this.mentionCustomization],
    toolbar: {
      items: [
        ...
      ],
    },
    mention: {
      feeds: [
        {
          marker: '@',
          feed: this.getUsers.bind(this),
        },
      ],
    },
    language: 'en-gb',
  };


  mentionCustomization(editor) {
    editor.conversion.for('upcast').elementToAttribute({
      view: {
        name: 'a',
        key: 'data-mention',
        classes: 'mention',
        attributes: {
          href: true,
          'data-user-id': true,
        },
      },
      model: {
        key: 'mention',
        value: (viewItem) => editor.plugins.get('Mention').toMentionAttribute(viewItem),
      },
      converterPriority: 'high',
    });

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

        // eslint-disable-next-line consistent-return
        return writer.createAttributeElement('a', {
          class: 'mention',
          'data-user-id': modelAttributeValue.userId,
          href: 'javascript:void(0)',
        }, {
          priority: 20,
          id: modelAttributeValue.uid,
        });
      },
      converterPriority: 'high',
    });
  }
}

在我从 7 升级到 9 之前，它使用的是相同的代码。我为此提供的唯一信息是 github post，但我无法解决问题。

感谢您的帮助。

Answer 1

经过反复试验和 ckeditor 的示例，我找到了答案。出于某种原因，Angular 9 仍然存在问题，即使它没有抛出任何错误，但提及仍然无效。幸运的是，我只是通过9升级到11。

我从 editorConfig 中删除了 extraPlugins 并添加了一个新函数来初始化 mentionCustomization 函数。

editorConfig = {
  extraPlugins: [this.mentionCustomization], // deleted this
    toolbar: {
      items: [
        ...
      ],
    },
}

onEditorReady(editor) {
  this.mentionCustomization(editor);
}

在 HTML 中将此新函数添加到 ckeditor 的就绪输出中

<ckeditor [formControlName]="formCtrlName"
          [editor]="editor"
          [config]="editorConfig"
          (ready)="onEditorReady($event)"></ckeditor>

CKEditor 提及自定义输出失败的插件 Angular 9

CKEditor mention plugin with customised output failing on Angular 9

mention

angular

ckeditor5