Топ плагинов jQuery. Плагин визуального редактора Trumbowyg

Топ плагинов jQuery. Плагин визуального редактора Trumbowyg

От автора: и снова здравствуйте. Позвольте представить вам очередной плагин из разряда must have. Сегодня мы познакомимся с функциональным jQuery плагином для организации визуального jQuery редактора для сайта. Подобных плагинов достаточно много и сегодня мы поработаем с плагином Trumbowyg.

Как уже отмечалось выше, плагинов визуальных jQuery редакторов можно найти в сети множество. Также часто их называют jquery wysiwyg редактор. Наиболее популярными среди них можно назвать CKEditor и TinyMCE. Эти решения используются во многих бесплатных и коммерческих CMS. Уверен, вы также могли использовать их в своих проектах.

Однако если по каким-то причинам вы захотите подобрать другой аналогичный плагин — это не станет проблемой, поскольку выбор большой. Сегодня мы познакомимся с одним из таких плагинов — плагин визуального jQuery редактора Trumbowyg. Он крайне прост в установке и использовании. К тому же весит он относительно немного.

Перейдем на официальный сайт плагина и скачаем его. Также можете взять все необходимые файлы, как обычно, из исходников к данной статье. Подключим необходимые файлы к нашей странице.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Далее нам необходимо обычное поле формы — textarea, к которой мы и привяжем визуальный редактор. Стоит отметить, что для корректной работы нам потребуется сервер, что в принципе логично. Также расширение файла сделаем php, чтобы можно было проверить работу jQuery редактора в действии.

Итак, создадим необходимое поле формы:

Топ плагинов jQuery. Плагин визуального редактора Trumbowyg

Теперь инициализация плагина при помощи метода trumbowyg:

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Топ плагинов jQuery. Плагин визуального редактора Trumbowyg

Упс! Что-то получилось, но не совсем то, что нужно. На панели визуального jQuery редактора очевидно должны быть иконки, которых сейчас нет. Для того, чтобы они появились, необходимо указать путь к ним в настройках jquery wysiwyg редактора. Заодно можем и русифицировать его, если вам это требуется. Для этого нам дополнительно нужно подключить языковой файл из папки langs и дополнительно установить язык соответствующей опцией:

Топ плагинов jQuery. Плагин визуального редактора Trumbowyg

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

И добавим вывод переменной $text в редакторе и перед ним.

Топ плагинов jQuery. Плагин визуального редактора Trumbowyg

Супер! Визуальный jQuery редактор работает. Ну а у меня на этом все. Исходники к статье вы можете скачать по ссылке. Больше о jQuery и JavaScript вы можете узнать из наших уроков или курса. Удачи!

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Курс по jQuery: основы

Изучите jQuery с нуля до результата!

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree