如何在Angular 5中为CKEditor5实现自定义图像上载程序？

我正在寻找一个示例，该示例显示了使用Angular 5为CKEditor 5实现自定义图像上载程序。

不需要该适配器的Angular-specific版本

例如，您可以使用this:或尝试将其与集成

然后，您只需将配置对象传递给

组件。不要忘记在

tsconfig.json

文件中设置

allowJs:true

，以允许绑定本地JS文件

或者，您可以自己创建它。这应该是上载适配器的基本框架，它应该与以下内容相匹配：

editor.plugins.get（'FileRepository'）。createUploadAdapter=loader=>{
返回新的UploadAdapter（loader，editor.config.get（'uploadUrl'），editor.t）；
}
类上载适配器{
构造函数（加载器、url、t）{
this.t=t；//Translate函数
this.loader=loader；
this.url=url；//端点url
}
上传（）{
//执行上载并返回对该操作的承诺。
}
中止{
//中止当前上载过程。
}
}

整个过程在文档中有更深入的描述：。您还可以查看的源代码

然后，要获取

ckeditor5 angular

包中的

editor

属性，您需要监听

ready

事件并获取编辑器参数：

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

---

事实上就是这样。

我用相对较少的麻烦完成了这项工作。它不需要重新生成编辑器。以下是基本步骤：

在组件中，使用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');
    };
  }

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

第三步创建在上述函数中引用的新类。您可以在组件定义后的同一个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');
  }

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

当您开始实施时，您将删除或更改每个控制台.log调用，使其符合您所需的逻辑——可能涉及对Angular的HttpClient的一些调用。但是请注意，这些函数将在Angular的NgZone域之外执行

当然，解析中的逻辑必须生成适当的URL。有关如何与加载程序交互的示例，请查看

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

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

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

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

如果这对您有效，那么完成插件应该不会有什么问题

---

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

在本例中，我将CKEditor 5与角度9一起使用。在@Maciej Bukowski的代码的基础上，我必须做一个关键的更改才能使其正常工作，否则插件将不会实例化，因为错误

t不是构造函数

完成此操作后，请使用处的示例替换代码。对我来说，这只是通过复制/粘贴和更改URL来实现的

只需将组件中的函数替换为类：

class TheUploadAdapterPlugin {
  constructor(editor) {
    console.log('TheUploadAdapterPlugin called');
    editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
      return new TheUploadAdapter(loader);
    };
  }
}

此外，我还有其他一些小问题需要解决。下面是我的完整代码：
在组件文件中（DialogEditContentComponent.ts或类似文件）

然后在.HTML模板文件中使用（在本例中，我使用被动表单和formbuilder，因此使用“formControlName”而不是[（NgModel）]

根据我的理解，这要求我在ckeditor源代码中包含ckeditor5简单上载，创建自定义生成，然后使用该自定义生成。如果有错误，请更正我。有没有任何方法可以在没有自定义生成的情况下实现自定义图像上载？是的，上述方法需要创建自定义生成。我将尝试扩展我的答案是一个如何编写自定义编辑器而不需要重建的示例。谢谢@Maciej。我通过简单的上传重建了编辑器。现在我面临将其包含在项目中的问题。从“../../ckeditor.js”导入*作为ClassicEditor；给我错误-“--allowJs”不是setYep，您应该在中使用
allowJs:true
您的
tsconfig.json
允许使用相对路径导入JS文件。事实上，我不确定从导入路径中删除
.JS
是否也能解决此问题……我已经更新了答案，也许您会发现这种方法更简单。@MaciejBukowski为什么在实例化编辑器时插入新的上载适配器不起作用？那么就不需要定制版本了，这很痛苦。你能在上传文件时做同样的事情吗？@Matthew我认为CKEditor不支持嵌入的通用文件。图像是特殊的，因为它们是作为CKEditor正在编辑的文档的一部分显示的媒体。你能将服务注入uploadadapter吗？你实际上如何从中上传？@Matthew我认为这行不通。我们用一个新关键字实例化Upload adapter，注入是针对Angular框架实例化的对象。但是，您可以做的是将您的服务注入UploadAdapterPlugin范围内的组件，然后将其作为pa传递
export class TheUploadAdapter {
  loader;  // your adapter communicates to CKEditor through this
  url;
  constructor(loader) {
    this.loader = loader;
    this.url = 'xxxxxxxxxxxxxxxx';
    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');
  }
}