Как загрузить изображение и встроить его с форматом base64 в ckeditor5?

Я использую ckeditor 5 classic, вот что у меня есть:

  ClassicEditor.create(document.querySelector('#editor'), 
        {
            toolbar: ['imageUpload', .....],

            ckfinder: {
                uploadUrl: '/CKEditorUpload/UploadImage'
         }
    })

Затем я создал свой собственный контроллер на стороне сервера, смог получить данные и сохранить файл на сервере. Я вернул JSON, и ckeditor 5 смог успешно вставить изображение.

  return Json(new {uploaded="true", url="/uploads/xxxxx.jpeg"});

В JSON успешный ответ выглядит так:

{
  "uploaded": "true",
  "url": "/uploads/xxxxx.jpeg"
}

Однако я действительно хочу закодировать изображение в base64 и вернуть его в ckeditor 5, чтобы он встроил его:

 <img src="data:image/jpeg;base64, xxxxxxxxx" />

Действительно, я успешно СДЕЛАЛ ЭТО в ckeditor 4, но для ckeditor 5 больше нет "window.parent.CKEDITOR.tools.callFunction". Как мой серверный контроллер может правильно вернуть данные base64 обратно клиенту, чтобы Ckeditor 5 мог их встроить? Заранее благодарим за помощь.


asp.net-mvc ckeditor ckeditor5
person userb00    schedule 14.05.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я понял сам ... В C # я возвращал закодированные данные в Controller обратно клиенту, и это сработало.

var data= "data:image/png;base64,xxxxxxxxxxxxxxxxxxx";            
return Json(new { uploaded = "true", url = HttpUtility.JavaScriptStringEncode(data ?? "") });

Другими словами, сообщение JSON будет выглядеть так. Я не ожидал, что "url" примет base64. В любом случае, это работает. Надеюсь, это поможет другим людям.

{
 "uploaded": "true",
 "url": "data:image/png;base64,xxxxxxxxxxxxxxxxxxx"
}
person userb00    schedule 16.05.2019
comment
Я думаю, что это все еще идет на сервер и возвращается обратно, вы знаете, как это сделать на стороне клиента? - person Andy Song; 20.05.2019
comment
@AndySong, похоже, это позволяет вам хранить все это на клиенте: ckeditor.com/docs/ckeditor5/latest/features/image-upload/ - person RTF; 16.05.2021