Мы мало уделяли разделу редактора текста на сайте, пришло время это исправить. Сегодня мы бы хотели поговорить о создании  текстового редактора для сайта, или как их еще называют- WYSIWYG — является аббревиатурой от английского What You See Is What You Get, — «что видишь, то и получишь». Дать пользователям возможность форматирования текста без изучения дополнительного кода – это то, над чем разработчики усердно стараются последние несколько лет. И все не напрасно, они уже добились значительно прогресса.

 

У нас будет достаточно простой редактор, в котором будут все основные элементы, которые присутствуют в современных редакторах, пользователь сможет загружать фото, редактировать его расположение, а также создавать таблицы.  Вся обработка действий будет реализована с помощью плагина jQuery- TextEditor  шрифта AwesomeBootstrap 4 и SweetAlert.

Особенности плагина:

  • Экспорт / импорт JSON.
  • Отменить / повторить.
  • Вырезать, скопировать и вставить.
  • Жирный, курсив и подчеркивание.
  • Выравнивание.
  • Генератор таблицы.
  • Загрузка изображения.
  • Пользовательские кнопки редактора.

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

Затем нам необходимо подключить jQuery TextEditor к нашему документу:

Cледующим шагом будет создание разметки, которая будет работать благодаря скриптам, которые мы подключили ранее.

Данный плагин был разработан программистом BoldyrevDA. Вы можете использовать данный редактор на своем ресурсе, он станет отличным дополнением к Вашему сайту.

Вот и все. Готово!

Читайте также: