Summernote и Laravel

Мой опыт использования Summernote на Laravelе.

Неплохой бесплатный редактор, который часто ставят на Laravel. Но некоторые казалось бы очевидные моменты в нем отсутствуют. Ниже я приведу проблемы, с которыми мне пришлось столкнуться:

Картинка вставляется в запись в base64

Не знаю зачем такое сделали, но видно какой-то глубокий смысл в этом есть.

Т.е. вместо нормального кода в браузере

<img src="data:image/foto.jpeg;>

Вы увидите

<img src="data:image/jpeg;base64,/9j/4Qv6RXhpZgAATU0AKgAAAAgABwESAAMAAAA...>

Решение

alt и title у картинок

Да, просто так это нельзя сделать, только через код. Если Ваши клиенты не знают html, это приведет к дополнительным сложностям.

Вот так выглядит стандартное окно для загрузки изображения в Summernote.

Если использовать решение https://github.com/asiffermann/summernote-image-title, можно будет добавлять атрибуты alt и title к изображениям.

Картинку невозможно сделать ссылкой

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

<img src="адрес картинки"><a href="link"></a>

вместо

<a href="link"><img src="адрес картинки"></a>

Забавно, да?

Решение https://github.com/DiemenDesign/summernote-image-attributes исправляет не только это, но также решает и проблему выше, и много чего, что касается дополнительных атрибутов изображений.

Лишние теги при вставке текста из Wordа и т.д.

Если попробовать вставить текст из ворда напрямую в Summernote, добавится куча пробелов, font-family и прочего ненужного мусора.

Решение https://github.com/summernote/summernote/issues/303 убирает все лишнее. Его можно доработать при необходимости, но в целом оно работает 🙂