ckeditor - 在 Angular 应用程序中为 CKEDITOR 5 创建自定义插件，抛出 TypeError : Cannot read property '0' of undefined

Question

我正在尝试添加一个自定义插件以添加到 ckeditor5-build-decoupled-document 编辑器。
当我将自定义插件添加到 ckeditor5-build-decoupled-document 构建代码然后运行 ​​npm run build 时.但是当我将 ckeditor.js 构建文件添加到我的 angular 项目时，我收到错误 TypeError: Cannot read property '0' of undefined 。



编辑器工具栏不再显示在屏幕上，我无法编辑文本，但是，该插件似乎正在执行其允许在编辑器中使用内联样式的目的。

我有两个问题:

我是否正确创建了插件？

我的 Angular 项目中的配置中是否缺少某些内容？

这些是我遵循的步骤和使用的代码

创建插件

import Plugin from '@ckeditor/ckeditor5-core/src/plugin';


export default class Extension extends Plugin {
    constructor( editor ) {
        super( editor );
    }

    init() {
        const editor = this.editor;

        let allowedAttributes = [
            'width', 'height', 'style', 'stylex', 'target', 'class', 'id', 'name', 'title', 'type', 'olddisplay', 'text-align', 'align',
            'border', 'cellspacing','padding', 'cellpadding', 'color', 'valign', 'clear', 'src',  'shapes', '&amp',
            'prefix', 'tagtype', 'datetime', 'cite',  'cols', 'colspan', 'noshade', 'text-decoration',
            'shape', 'start',  'alt', 'strong', 'files', 'hr', 'font-size',
            'com',  'background-color', 'rowspan', 'span', 'page', 'content',
            'action', 'value', 'autofocus', 'maxlength', 'rows', 'for', 'aria-label', 'checked', 'selected',
            'rel', 'scope', 'location', 'cellpacing', 'block-id', 'lang',
            'original-style', 'datatype', 'property', 'controls', 'controlslist', 'data-attr', 'poster', 'preload',
            'tabindex', 'role', 'aria-describedby', 'aria-disabled','aria-haspopup', 
            'href', 'col', 'doc', 'attach', 'pls', 'vspace', 'hspace', 'slatepath'];

         //creates a new schema to to keep preexisting styles
         editor.model.schema.extend('$root', { allowAttributes: allowedAttributes });
         editor.model.schema.extend('$block', { allowAttributes: allowedAttributes });
         editor.model.schema.extend('$text', { allowAttributes: allowedAttributes });

         for (var i = 0; i < allowedAttributes.length; i++) {
             editor.conversion.attributeToAttribute({ model: this.allowedAttributes[i], view: this.allowedAttributes[i] });
         }

         editor.model.schema.extend('paragraph', { allowAttributes: '__style' });

         editor.conversion.for('upcast').attributeToAttribute({
             model: {
                 key: '__style',
                 name: 'paragraph'
             },
             view: 'style'
         });

         editor.conversion.for('downcast').add(dispatcher => {
             dispatcher.on('attribute:__style:paragraph', (evt, data, conversionApi) => {
                 conversionApi.consumable.consume(data.item, evt.name);

                 const viewElement = conversionApi.mapper.toViewElement(data.item);

                 conversionApi.writer.setAttribute('style', data.attributeNewValue, viewElement);
             });
         });
    } 
}

然后我将插件添加到 ckeditor.js 文件

import Extension from "../ckeditor5-extension/src/extension.js";

DecoupledEditor.builtinPlugins = [
    *
    *
    PasteFromOffice,
    Table,
    TableToolbar,
    Extension
];

在此之后，我运行 npm run build它会在 build 文件夹中生成 ckeditor.js。
接下来，我将 ckeditor.js(以及相应的翻译文件)从 build 文件夹复制到我的 angular 项目的 assets 文件夹中。

然后将我的自定义编辑器添加到我的文件中。

import * as CustomEditor from 'src/assets/ckeditor.js';
public Editor = CustomEditor;

在 tsconfig.json

"compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowJs": true,
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  }

在控制台中，当我打印出编辑器的插件时，我的自定义插件显示为未定义。

["Essentials", "Alignment", "FontSize", "FontFamily", "Highlight", "CKFinderUploadAdapter", "Autoformat", "Bold", "Italic", "Strikethrough", "Underline", "BlockQuote", "CKFinder", "EasyImage", "Heading", "Image", "ImageCaption", "ImageStyle", "ImageToolbar", "ImageUpload", "Link", "List", "MediaEmbed", "Paragraph", "PasteFromOffice", "Table", "TableToolbar", undefined]

Answer 1

所以这个问题不是由任何 angular/Ckeditor5 集成引起的，而是代码中的一个简单错误。

当我熟悉创建插件的过程并将代码从我的 angular 应用程序传输到克隆的 repo 以创建我的自定义插件时，我最初是在 Angular 中构建代码的。

该错误是一个简单的引用错误。

线路

editor.conversion.attributeToAttribute({ model: this.allowedAttributes[i], view: this.allowedAttributes[i] });

应该是

editor.conversion.attributeToAttribute({ model: allowedAttributes[i], view: allowedAttributes[i] });

减去这个。引用。

对于创建自定义插件的任何人，当您构建插件时，repo 中有一个示例编辑器，这将允许您使用最新更改测试您的代码。您可以在转移到 Angular 应用程序之前确保代码正常工作，从而排除您的自定义插件和 Angular 应用程序的任何集成问题。