Question

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

Answer 1

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

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

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

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

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>

@Component()
class EditorComponent {
     public onReady( editor ) {
          // Now you can acess the editor.
     } 
}

就是这样。

Answer 2

我得到了一些相对较少的麻烦。它不需要重建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');
  }

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

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

您在解决中的逻辑当然必须生成适当的URL。查看CKEditor documentation，以获取有关如何与 loader 进行交互的良好示例。

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

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

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

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

请记住，生成的 Promise 具有一个 reject 参数，请根据需要使用它。

Answer 3

在本示例中，我将Angular 9与CKEditor 5一起使用。基于@ Maciej-Bukowski的代码，我必须进行一项关键的更改才能使其正常工作，否则插件将无法实例化，并给出错误{{1 }}。

完成此操作后，将代码替换为CKEditor 5 custom upload adapter中的示例。对于我来说，只需复制/粘贴并更改URL即可。

只需用一个类替换组件中的函数：

t is not a constructor

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

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

然后在.HTML模板文件中使用（在这种情况下，我使用Reactive表单和formbuilder，因此使用的是'formControlName'而不是[（NgModel）]！

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

export class DialogEditContentComponent implements OnInit {
  public ckEditorClassic = DecoupledEditor;
  public ckconfig = {};

  constructor() {
    this.ckconfig = {
      // include any other configuration you want
      // https://stackoverflow.com/questions/53705057/how-to-implement-custom-image-uploader-for-ckeditor5-in-angular-5
      extraPlugins: [ TheUploadAdapterPlugin ]
    };
  }// constructor

  public onReady( editor ) {

    editor.ui.getEditableElement().parentElement.insertBefore(
      editor.ui.view.toolbar.element,
      editor.ui.getEditableElement()
    );

  }


}// DialogEditContentComponent

然后是上传器本身：（文件名the-upload-adapter.ts）

      <ckeditor [editor]="ckEditorClassic"
                formControlName="HTML"
                [config]="ckconfig"
                (ready)="onReady($event)"></ckeditor>

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

3 个答案: