CKEditor 5 Реактивная загрузка пользовательских изображений

Question

Я провел весь день, пытаясь заставить работать CKEditor с React.Кажется, все в порядке, кроме изображений.Я

У меня уже есть способ загрузить изображения на мой сервер (лазурь).Все, что мне нужно, это знать, как подключить его к CKEditor с React!Я получаю сообщение об ошибке «Адаптер загрузки не определен».

<CKEditor
          editor={ ClassicEditor }
          data={this.state.body ? this.state.body : "<p>Body text...</p>"}
          onInit={ editor => {
            // You can store the "editor" and use when it is needed.
            console.log( 'Editor is ready to use!', editor );
          } }
          onChange={ ( event, editor ) => {
            const data = editor.getData();
            console.log( { event, editor, data,}, "DATA" );
          } }
          // config={upload=this.uploadImage()}
          
        />

Я предполагаю, что это как-то связано с файлом конфигурации?У меня уже есть функция, которая загружает файл и возвращает URL, я просто не знаю, где добавить это в CKEditor в React.

Answer 1

Эта ошибка означает, что адаптер загрузки не подключен.

Во-первых, вам необходимо реализовать собственный Настраиваемый адаптер загрузки , который обрабатывает загрузку изображений на сервер.В этом ответе переполнения стека есть образец

И затем вы связываете редактор с адаптером загрузки с помощью метода onInit.Вот так:

<CKEditor
    editor={ClassicEditor}
    data={this.state.body ? this.state.body : "<p>Body text…</p>"}
    onInit={editor => {
       // Connect the upload adapter using code below 
       editor.plugins.get("FileRepository").createUploadAdapter = function(loader) {
          return new UploadAdapter(loader);
       };
       console.log("Editor is ready to use!", editor);
    }}
    onChange={(event, editor) => {
        const data = editor.getData();
        console.log({ event, editor, data }, "DATA");
    }}
/>

UploaderAdapter в коде - это имя вашей реализации класса UploadAdapter.