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

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

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

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

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

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

<link href="css/ui/trumbowyg.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/trumbowyg.js"></script>

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

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

<form action="" method="post">
	<textarea id="editor" name="text"></textarea>
	<button type="submit" class="btn btn-success">Отправить</button>
</form>

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

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

$(function(){
	$('#editor').trumbowyg();
});

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

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

<script src="langs/ru.js"></script>
$(function(){
	$('#editor').trumbowyg({
		svgPath: 'css/ui/icons.svg',
		lang: 'ru'
	});
});

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

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

<?php
$text = !empty($_POST['text']) ? $_POST['text'] : '';
?>

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

<?= $text ?>

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

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

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

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

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

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

Метки:

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree