Блог

Я пытаюсь использовать QuillJS, чтобы позволить пользователю писать форматированный текст, а затем сохранять его как JSON для последующего отображения. В одной форме есть 2 из этих областей форматированного текста, которые могут включать изображения. QuillJS кодирует изображения как строки base64, и мой POST-запрос приводит к 413 by Express.

Я попытался изменить ограничения, добавив параметры express json, даже используя экстремальные числа.

 // app.js
//----------------------------------------------------
// Middlewares
//----------------------------------------------------
app.use(express.json({limit: '2000mb'}));
app.use(express.urlencoded({extended: true, limit:'2000mb'}));
  

Даже это не помогло, и я думаю, что не логично разрешать этим параметрам такие значения.

Я пробовал использовать json и urlencoded enctypes. Когда я попытался опубликовать с помощью multipart / form, req.body было пусто.

 // My html page (pugJS)

form(enctype='application/x-www-form-urlencoded', action='/editor/page', 
     method='POST', onsubmit='return addContent()')

.form-control
        label Content-1
        div#toolbar
        div#editor
        input#content(name='content', type='text',  hidden)
  

Функция addContent(), которая запускается перед отправкой формы, просто изменяет input#content значение с JSON.stringify(#editor.getContents())

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

Лучшим подходом к этому было бы перезаписать функцию загрузки изображения, а затем сохранить изображение на Amazon S3 или на каком-либо облачном сервере. Затем вы вставляете его в редактор, так как <img src="http://uploaded-image-url"> это решит вашу проблему с максимальной памятью.

Я исправил свою проблему за несколько часов до того, как @argo упомянул, и я сделал это таким образом. Итак, я хотел опубликовать немного подробностей о решении. Я также руководствовался проблемой github, но, похоже, не могу снова найти ссылку, в случае, если я ее найду, я отредактирую сообщение и добавлю его.

 // Quill - EN content
var quillEn = new Quill('#editor-en', {
  modules: {
    toolbar: toolbarOptions
  },
  theme: 'snow'
});

// set custom image handler
quillEn.getModule('toolbar').addHandler('image', () => {
  selectLocalImage(quillEn);
});

// create fake input to upload image to quill
function selectLocalImage(editor) {
  const input = document.createElement('input');
  input.setAttribute('type', 'file');
  input.setAttribute('accept', 'image/png, image/jpeg')
  input.click();

  // Listen upload local image and save to server
  input.onchange = () => {
    const file = input.files[0];
    saveImageToServer(editor, file);
  };
}

// upload image to server
function saveImageToServer(editor, file) {
  const fd = new FormData();
  fd.append('image', file);

  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/api/page/upload_image', true);
  xhr.onload = () => {
    if (xhr.status === 200) {
      // this is callback data: url
      const url = JSON.parse(xhr.responseText).data;
      insertToEditor(editor, url);
    }
  };
  xhr.send(fd);
}

// manipulate quill to replace b64 image with uploaded image
function insertToEditor(editor, url) {
  // push image url to rich editor.
  const range = editor.getSelection();
  editor.insertEmbed(range.index, 'image', url.toString());
}
  

В серверной части, где вы ПУБЛИКУЕТЕ изображение, вы должны вернуть json как { data: FullUrlToImg } с ответом 200, если вы хотите изменить свой статус на 201 или что-то еще, не забудьте обновить его в saveImageToServer функции.

Итак, подводя итог, вы устанавливаете пользовательский обработчик изображений для своего редактора quill, отправляете изображение на сервер, как только пользователь выбирает вставку, затем заменяете URL-адрес загруженным изображением в редакторе.

Спасибо.