• Записи 1559
  • Теги 117
  • Комментарии 3295

Лог жизни

Эксперименты с Quill

Поизучал API редактора Quill, который рассматриваю как один из возможных WYSIWYG-редакторов для MLFW/MLCE. Другой вариант — CKEditor, который появился гораздо раньше и устроен более традиционно, как те WYSIWYG, к которым я привык.
В целом Quill мне очень нравится! Похоже,он генерирует достаточно чистый HTML-код почти без всяких inline (чем страдает большинство других редакторов). И ещё он позволяет вставлять изображения из буфера обмена, кодируя их в data:base64.
Но есть одна особенность: он не использует textarea в качестве стартового элемента, если так можно выразиться, а вместо этого редактирует любые элементы внутри заданного DOM-узла. С одной стороны, это классно: позволяет легко и безболезненно использовать его для редактирования текста прямо на той странице, где отображается готовая статья. С другой — труднее сделать возможность написать хоть что-то пользователям, у которых JavaScript отключён в принципе. Хотя сейчас вроде нашёл обходное решение…
Ещё непонятно, как там с поддержкой S3-протокола. Вроде нашёл какое-то стороннее решение на GitHub, но непонятно, насколько оно рабочее. А вот в CKEditor оно есть сразу,
И поймал один мелкий баг: если в конец текста вставить блок кода, то поставить курсор после него, чтобы писать дальше обычный текст уже не получится. Только вырезать блок в буфер обмена, добавлять пустую строку, и потом вставлять обратно. Вот с картинками такого не наблюдается (хотя в других редакторах и с ними бывают такие проблемы).

12 комментариев:

Показать еще 2 комментария
MadTechGuy
0

А почему бы не делать это на стороне клиента? Как вариант, таким способом. Или как я предлагал здесь: не встраивать изображения в само сообщение, а прикреплять их к нему, подобно тому, как это сделано в мессенджерах, но с той разницей, что отправлять их на сервер не сразу, а только в момент отправки сообщения и уже тогда на стороне сервера уменьшать их размер?

4X_Pro
0

Что касается второго, то нужно же как-то их ещё отображать в редакторе до отправки. Можно, конечно, сделать проще: на стороне сервера проверять наличие img, где src содержит данные в base64. Но это будет весьма неэффективно по памяти…
А вот идея с масштабированием на стороне клиента через canvas заинтересовала!

MadTechGuy
0
4X_Pro написал(а):
Что касается второго, то нужно же как-то их ещё отображать в редакторе до отправки.

Под редактором отображать изображения, закодированные в base64, примерно так:

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


Задать им ширину где-нибудь 100px, чтобы они выглядели, как миниатюры. А перед отправкой сообщения декодировать их из base64 и вместе с сообщением отправлять на сервер. Потом при отображении комментария отображать прикреплённые изображения над текстом сообщения.
4X_Pro
0

Ну да, но я-то думаю, как сделать, чтобы можно было в произвольное место текста картинки вставлять, а не только под/над сообщениями. Впрочем, тут вообще всё как-то непросто: в одних случаях (при написании обычных статей) нужно одно, в других (скажем, если хочешь сделать фотогалерею) — другое.

MadTechGuy
0
4X_Pro написал(а):
но я-то думаю, как сделать, чтобы можно было в произвольное место текста картинки вставлять

Может тогда лучше на стороне сервера разбирать сообщение, находить в нём все закодированные в base64 изображения и конвертировать? А максимальный размер сообщения ограничить, скажем, до 10-20 МБ, чтобы обработка происходила быстро и экономно по памяти.
Нет
Гость
0
4X_Pro написал(а):
Что касается второго, то нужно же как-то их ещё отображать в редакторе до отправки.

В ixbt-конференции есть 4 основных способа вставки картинок:
  1. С внешнего сайта. Размер таких изображений сильно ограничен, поэтому сразу делаю ссылку из ▒-псевдо-превьюшки. Это самый удобный способ, т.к. картинки можно группировать по папкам, и давать им понятные русскоязычные названия.
  2. Через фотогалерею. Мне этот способ интуитивно не нравится, поэтому ни разу им не пользовался.
  3. Через курируемую тему. Каждая графическая ссылка содержит в себе составной идентификатор поста, к которому она прикреплена. Вот #пример такой вставки.
  4. Обычные вложения. Предпросмотр неопубликованных постов возможен через специальный b-тег [ai]:





  5. Вставка в формате base64 там вроде бы тоже возможна. Могу поискать примеры... Но мне этот способ интуитивно не нравится, т.к. а) посты становятся слишком огромными ; б) вряд ли возможен лёгкий поиск картинок в привязке к теме и автору.
Нет
Гость
0

в п.4 тег [ia]

4X_Pro
0
10geek написал(а):
Может тогда лучше на стороне сервера разбирать сообщение, находить в нём все закодированные в base64 изображения и конвертировать?

Сейчас прихожу к выводу, что нужно предусмотреть два варианта. Первый — это вставка изображения прямо в текст с уменьшением через canvas и последующей проверкой на стороне сервера, как ты предлагаешь. Второй — это загрузка обычных приложенных файлов (для того, чтобы получилось сообщение с фотогалереей высокого качества).
Гость написал(а):
Предпросмотр неопубликованных постов возможен через специальный b-тег [ai]:

Кстати, это я в итоге в IntB сделал. Только у меня тег пишется так: [attach=номер]. Вроде даже в каком-то из сообщений здесь используется.
Нет
Гость
0
4X_Pro написал(а):
у меня тег пишется так: [attach=номер]
Ну а при публикации/редактированиях он автоматически преобразуется в [img]...[/img] ? :&#039;(
4X_Pro
0

При редактированиях — нет, будет показываться как тег. При публикации — да, на его месте будет выведена либо картинка, либо видео, либо ссылка на файл.

Написать комментарий
Прикрепить файлы: (не более 4 файлов, не более 102400 Кб каждый, 102400 Кб всего)


Задать вопрос