От автора: и снова здравствуйте. Позвольте представить вам очередной плагин из разряда must have. Сегодня мы познакомимся с функциональным jQuery плагином для организации визуального jQuery редактора для сайта. Подобных плагинов достаточно много и сегодня мы поработаем с плагином Trumbowyg.
Как уже отмечалось выше, плагинов визуальных jQuery редакторов можно найти в сети множество. Также часто их называют jquery wysiwyg редактор. Наиболее популярными среди них можно назвать CKEditor и TinyMCE. Эти решения используются во многих бесплатных и коммерческих CMS. Уверен, вы также могли использовать их в своих проектах.
Однако если по каким-то причинам вы захотите подобрать другой аналогичный плагин — это не станет проблемой, поскольку выбор большой. Сегодня мы познакомимся с одним из таких плагинов — плагин визуального jQuery редактора Trumbowyg. Он крайне прост в установке и использовании. К тому же весит он относительно немного.
Перейдем на официальный сайт плагина и скачаем его. Также можете взять все необходимые файлы, как обычно, из исходников к данной статье. Подключим необходимые файлы к нашей странице.
|
1 2 3 |
<link href="css/ui/trumbowyg.css" rel="stylesheet"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="js/trumbowyg.js"></script> |
Далее нам необходимо обычное поле формы — textarea, к которой мы и привяжем визуальный редактор. Стоит отметить, что для корректной работы нам потребуется сервер, что в принципе логично. Также расширение файла сделаем php, чтобы можно было проверить работу jQuery редактора в действии.
Итак, создадим необходимое поле формы:
|
1 2 3 4 |
<form action="" method="post"> <textarea id="editor" name="text"></textarea> <button type="submit" class="btn btn-success">Отправить</button> </form> |
Теперь инициализация плагина при помощи метода trumbowyg:
|
1 2 3 |
$(function(){ $('#editor').trumbowyg(); }); |
Упс! Что-то получилось, но не совсем то, что нужно. На панели визуального jQuery редактора очевидно должны быть иконки, которых сейчас нет. Для того, чтобы они появились, необходимо указать путь к ним в настройках jquery wysiwyg редактора. Заодно можем и русифицировать его, если вам это требуется. Для этого нам дополнительно нужно подключить языковой файл из папки langs и дополнительно установить язык соответствующей опцией:
|
1 2 3 4 5 6 7 |
<script src="langs/ru.js"></script> $(function(){ $('#editor').trumbowyg({ svgPath: 'css/ui/icons.svg', lang: 'ru' }); }); |
В результате мы получили простое и легковесное решение нашей задачи, которое вполне подойдет для несложных задач. Ну и напоследок проверка работы плагина jquery редактор. Попробуем набрать некоторый текст в редакторе и отправить его на сервер. Ну а на сервере примем его и выведем. В начале файла добавим проверку:
|
1 2 3 |
<?php $text = !empty($_POST['text']) ? $_POST['text'] : ''; ?> |
И добавим вывод переменной $text в редакторе и перед ним.
|
1 |
<?= $text ?> |
Супер! Визуальный jQuery редактор работает. Ну а у меня на этом все. Исходники к статье вы можете скачать по ссылке. Больше о jQuery и JavaScript вы можете узнать из наших уроков или курса. Удачи!
