Найти в Дзене

Нашел лучший WYSIWYG редактор для сайта

Называется сие чудо summernote. Реально простой, удобный, есть все что нужно. Нужно сделать страницу чтобы девочки сами могли создавать контент, таблички там, заголовки, картинки добавляли и т.п. Работал с CKEditor до этого и еще с одним TinyMCE кажется. CKEditor использовал у себя на сайте, но там мне надо было дополнительно еще и код вставлять, подключил для этого Highlight библиотеку, но побороть я его не мог, оставил до лучший времен, а тут надо было подыскать что нибудь, чтобы не опытные девочки сами с контентом работали и вот таким образом я его в общем нашел! В первую очередь фотографии!!!! О, это целая головная боль, в CKEditor по моему нужно было подкупать дополнительный функционал. Как то влиять на него у меня не получалось, поэтому делал формы для загрузки изображений снаружи от редактора, и потом туда надо было вставлять вручную копируя ссылку, сами понимаете это зло какое то. В этом редакторе просто шикарно реализовано, не хотите заморачиваться, пожалуйста, картинка встав

Называется сие чудо summernote. Реально простой, удобный, есть все что нужно.

Нужно сделать страницу чтобы девочки сами могли создавать контент, таблички там, заголовки, картинки добавляли и т.п. Работал с CKEditor до этого и еще с одним TinyMCE кажется. CKEditor использовал у себя на сайте, но там мне надо было дополнительно еще и код вставлять, подключил для этого Highlight библиотеку, но побороть я его не мог, оставил до лучший времен, а тут надо было подыскать что нибудь, чтобы не опытные девочки сами с контентом работали и вот таким образом я его в общем нашел!

В первую очередь фотографии!!!! О, это целая головная боль, в CKEditor по моему нужно было подкупать дополнительный функционал. Как то влиять на него у меня не получалось, поэтому делал формы для загрузки изображений снаружи от редактора, и потом туда надо было вставлять вручную копируя ссылку, сами понимаете это зло какое то. В этом редакторе просто шикарно реализовано, не хотите заморачиваться, пожалуйста, картинка вставляется прямо в текст в Base64 формате, ничего загружать никуда не надо. Но если что, кнопку загрузки фотографии можно перезагрузить.

-2

Вот подсвеченный код при инициализации редактора.

-3

вот код загрузки фото через AJAX на сервер, ничего криминального, кроме загрузки элемента обратно в редактор, но и тут понятно, что мы создаем DOM - элемент и вставляем его в то место где у нас курсор стоит.

Дальше внедряем свою кнопку на панель редактора.

-4

Эта кнопка ищет все PRE элементы и подсвечивает код в них. Дальше внедряем эту кнопку в тулбар

-5

Желтым выделено, это внедрений самой кнопки, все что остальное зеленым обвел, это кнопки по умолчанию, посмотрел где то у них на сайте или через поисковик нашел.

Забирать текст тоже очень просто.

-6

Все, отправляем на сервер удобным для нас образом.

Если понравилось, ставьте лайки. Подписывайтесь на мой канал.