Как реализовать пользовательский загрузчик изображений для CKEditor5 в Angular 5? - PullRequest
Новая
       38

Как реализовать пользовательский загрузчик изображений для CKEditor5 в Angular 5?

0 голосов
/ 10 декабря 2018

Я ищу пример, показывающий реализацию пользовательского загрузчика изображений для CKEditor 5 с использованием Angular 5.

Ответы [ 2 ]

0 голосов
/ 16 января 2019

Я получил это, чтобы работать с относительно небольшой суетой.Не требует перестройки 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');
  }

На этапе быстрого тестирования измените вызов resol вернуть URL, который указывает на какое-то фиксированное изображение.Это может быть что угодно.Эта строка URL будет вставлена ​​в содержимое редактора, куда пользователь помещает изображение.

Когда вы приступите к реализации, вы будете удалять или изменять каждый из вызовов console.log на любую логику, которую вы используете.хотеть - вероятно, с участием некоторых вызовов Angular HttpClient .Однако обратите внимание, что функции будут выполняться вне домена Angular NgZone .

Ваша логика в resol , конечно, должна будет сгенерировать соответствующий URL.В документации CKEditor приведен хороший пример взаимодействия с загрузчиком .

Наконец, вам нужно убедиться, что ваш элемент ckeditor использует объект конфигурации ckconfig примерно так: 

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

Теперь, когда вы используетеВ этом редакторе вы будете использовать инструмент для загрузки изображения.Вы должны увидеть выходные данные в журнале консоли и строку в вызове resol , вставленную в содержимое редактора.Если строка является допустимым URL-адресом изображения, вы увидите это изображение.

Если это работает для вас, не должно быть проблем с заполнением плагина.

Помните, что сгенерированный Promise имеет параметр reject , поэтому используйте егопо мере необходимости.

0 голосов
/ 10 декабря 2018

Нет необходимости в конкретной версии этого адаптера для 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>

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

И это необычно.

...