angular11安装插件CKEditorError: ckeditor-duplicated-modules

[wsynhaa]

"@ckeditor/ckeditor5-angular": "^2.0.1", "@ckeditor/ckeditor5-build-classic": "^27.0.0", "@ckeditor/ckeditor5-ui": "^27.0.0", 只有当@ckeditor/ckeditor5-ui为11.0.0版本时才不会报这个错误，我想问问什么问题

[FilipTokarski]

Hi, please provide precise steps to reproduce the issue ( in English ). And also make sure you follow Angular integration guide.

[wsynhaa]

This is my package.json This is my custom plugin I completely follow the documentation to configure step by step, can't I use this method?

[FilipTokarski]

Ok, I get it now. You are trying to add a custom plugin to the editor build, which is not allowed. To solve this problem, you need to first create a custom build with your custom plugin and then add it to your Angular app.

[wsynhaa]

But how to solve this situation? Still report this error

[AlanObject]

Ok, I get it now. You are trying to add a custom plugin to the editor build, which is not allowed. To solve this problem, you need to first create a custom build with your custom plugin and then add it to your Angular app.

I am in the middle of this exact same problem, trying to add an upload adapter to an Angular application. The documentation says you can add a custom plugin to pre-built editor, but only if it has no dependencies. Is it possible to write a plugin without being depending on the Plugin class (which you need to extend) or the FileRepository class, which you reference to create the UploadAdapter? If there is a way to do that please let me know.

This really seems like a feature deficit or, rather, a badly documented feature. It really isn't a plugin at all because it has to be built with the main product. The following is my skeleton code, which is in the same file as my Angular Component class.

import Plugin from '@ckeditor/ckeditor5-core/src/plugin.js';
import FileRepository from '@ckeditor/ckeditor5-upload/src/filerepository.js';

class UploadAdapterPlugin extends Plugin {

  static get requires() {
    console.log('UploadAdapterPlugin.requires');
    return [ FileRepository ];
  }

  static get pluginName() {
    console.log('UploadAdapterPlugin.pluginName');
    return 'P3UploadAdapter';
  }

  init() {
    console.log('UploadAdapterPlugin.init')
    this.editor.plugins.get(FileRepository).createUploadAdapter =
        (loader: any) => { new UploadAdapter(loader); }
  }

}

class UploadAdapter {

  loader: any;

  constructor(loader: any) {
    console.log('Upload Adapter Instantiated', loader);
    this.loader = loader;
  }

  // start upload

  upload() {
    console.log('Start Upload');
    return new Promise((resolve, reject) => {
      resolve( { default: 'http://localhost:4201/media/image/374' });
    });

  }

  abort() {
    console.log('upload aborted');
  }

}

[CKEditorBot]

There has been no activity on this issue for the past year. We've marked it as stale and will close it in 30 days. We understand it may be relevant, so if you're interested in the solution, leave a comment or reaction under this issue.

[CKEditorBot]

There has been no activity on this issue for the past year. We've marked it as stale and will close it in 30 days. We understand it may still be relevant, so if you're interested in the solution, leave a comment or reaction under this issue.

[CKEditorBot]

We've closed your issue due to inactivity over the last year. We understand that the issue may still be relevant. If so, feel free to open a new one (and link this issue to it).