如何在 Angular 5 中为 CKEditor5 实现自定义图像上传器？

Question

我正在寻找一个示例，显示使用 Angular 5 为 CKEditor 5 实现自定义图像上传器。

Answer 1

我让这个工作相对较少大惊小怪。它不需要重建 CKEditor。以下是基本步骤：

在您的组件中，如果您还没有这样做，请使用 CKEditor 配置对象定义一个实例变量。它需要有一个extraPlugins元素：

  ckconfig = {
    // include any other configuration you want
    extraPlugins: [ this.TheUploadAdapterPlugin ]
  };

第二步在您的组件中创建引用的函数，如下所示：

  TheUploadAdapterPlugin(editor) {
    console.log('TheUploadAdapterPlugin called');
    editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
      return new UploadAdapter(loader, '/image');
    };
  }

第三步创建在上述函数中引用的新类。您可以在组件定义之后的同一个 Typescript 文件中执行此操作，也可以将其放在单独的文件中并导入。

class UploadAdapter {
  loader;  // your adapter communicates to CKEditor through this
  url;
  constructor(loader, url) {
    this.loader = loader;   
    this.url = url;
    console.log('Upload Adapter Constructor', this.loader, this.url);
  }

  upload() {
    return new Promise((resolve, reject) => {
      console.log('UploadAdapter upload called', this.loader, this.url);
      console.log('the file we got was', this.loader.file);
      resolve({ default: 'http://localhost:8080/image/1359' });
    });
  }

  abort() {
    console.log('UploadAdapter abort');
  }

在快速测试阶段，更改解析调用以返回指向某个固定图像的 URL。它可以是任何东西。该 URL 字符串将被粘贴到用户放置图像的编辑器内容中。

当您开始实施时，您将删除或更改每个console.log调用，将其更改为您想要的任何逻辑——可能涉及对 Angular 的HttpClient 的一些调用。但是请注意，这些函数将在 Angular 的NgZone域之外执行。

您的解析逻辑当然必须生成适当的 URL。查看CKEditor 文档以获得如何与加载器交互的一个很好的例子。

最后，您需要确保您的ckeditor元素正在使用ckconfig配置对象，如下所示：

<ckeditor [editor]="Editor" [config]="ckconfig"
              [(ngModel)]="doc.text" name="editcontent"></ckeditor>

现在，当您使用此编辑器时，您将使用该工具上传图像。您应该会看到控制台日志上的输出和插入到编辑器内容中的解析调用中的字符串。如果字符串是某个图像的有效 URL，您将看到该图像。

如果这对您有用，那么完成插件应该没什么问题。

请记住，生成的Promise有一个拒绝参数，因此请根据需要使用它。

Answer 2

不需要该适配器的 Angular 特定版本。

您可以使用例如：https: //github.com/pourquoi/ckeditor5-simple-upload或尝试将其与CKFinder集成。

然后，您所需要做的就是将配置对象传递给<ckeditor [config]='config'>组件。不要忘记allowJs: true在您的tsconfig.json文件中进行设置以允许捆绑本地 JS 文件。

或者，您可以自己创建它。这应该是上传适配器的基本框架，应与UploadAdapter 接口相匹配匹配：

editor.plugins.get( 'FileRepository' ).createUploadAdapter = loader => {
    return new UploadAdapter( loader, editor.config.get( 'uploadUrl' ), editor.t );
}

class UploadAdapter {
    constructor( loader, url, t ) {
        this.t = t; // Translate function
        this.loader = loader;
        this.url = url; // Endpoint URL
    }

    upload() {
        // Perform uploading and return a promise to that action.
    }

    abort() {
        // Abort current upload process.
    }
}

整个过程在文档中有更深入的描述：https://ckeditor.com/docs/ckeditor5/latest/framework/guides/deep-dive/upload-adapter.html。您还可以查看https://github.com/pourquoi/ckeditor5-simple-upload/blob/master/src/adapter.js的源代码

然后，要获取包editor中的属性，ckeditor5-angular您需要监听事件ready并获取编辑器参数：

<editor [ready]="onReady" ...></editor>

<editor [ready]="onReady" ...></editor>

基本上就是这样。