Подключение визуального редактора к Kohana 3.3

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

Первым делом идем на сайт TinyMce и скачиваем его последнею версию у меня на данный момент было 3.5.8

Распаковываем ,оставляем папку tinymce и кладем ее в корень нашего проекта. На этом же сайте скачиваем пакет русификации ,распаковываем в корень поверх папки tinymce.

Чтобы обезопасить вводимый пользователем материал мы установим библиотеку HTML Purifier. Существуют уже адаптированный для фреймворка Kohana вариант в виде готового модуля. Разработку ведет Shadowhand https://github.com/shadowhand/purifier.
К сожалению пока не было варианта для Kohana версии 3.3 ,поэтому я сам адаптировал под эту версию ,могут быть ошибки.
После того как мы скачиваем данный модуль ,нужно будет также скачать HTML Purifier последней версии ,распаковать и положить в папку модуля htmlpurifier/vendor/htmlpurifier.
После этого подключить модуль в файле application/bootstrap.php.

Но так как я добрый самаритянин ,то выложу уже готовый модуль который останется только выгрузить в папку /modules/ и опять же подключить в файле application/bootstrap.php
HtmlPurifier Kohana 3.3

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

В файле вида ,где мы ходим сделать форму с визуальным редактором подключаем JS — скрипт

<script type="text/javascript" src="/tinymce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
        mode : "textareas",
	language : "ru"
});
</script>
<h3>Добавление новости</h3>
<?php echo Form::open('/news/add')?>
<?php echo Form::label('title', 'Введите название новости (max 128)') ?><br />
<?php echo Form::input('title')?> <br />
<?php echo Form::label('content', 'Введите текст новости') ?>  <br />
<?php echo Form::textarea('content',HTML::chars(Arr::get($_POST, 'content')),array('rows'=>20))?> <br />
<?php echo Form::submit('save','Добавить')?>
<?php echo Form::close()?>

Теперь у нас поля формы с textarea автоматом станут полями редактора TinyMce.
У данного редактора просто огромное количество настроек ,разнообразных вариаций компоновок и тем оформления (которые вы изучите сами) поэтому я лучше немного расскажу о том как пуще обезопасить себя от вводимых «особо умными пользователями» непристойностями и выложу пару своих вариантов компоновок кнопок.

В контроллере где мы проверяем вводимые пользователями данные ,используем нашу библиотеку HtmlPurifier (ее вы тоже будете настраивать под себя :))

$data = Arr::extract($_POST, array('title', 'content'));
$data = Arr::map('Security::xss_clean', $data);

Теперь мы более-менее в относительной безопасности ,но я повторюсь безопасность можно обеспечить только при правильной настройки как редактора так и библиотеки HtmlPurifier ,поэтому и я тоже могу допустить XSS инъекции ,ибо не совсем пока их хорошо освоил (документация у них совсем мне не понравилось)

Еще пару полезных вещей при работе с TinyMce и HtmlPurifier. Для того чтобы разрешить вставлять ролики с Youtube и комментарии HTML (мне лично из них понадобился ).
Пропишем в файле настроек HtmlPurifier — /modules/htmlpurifier/config/purifier.php

<?php defined('SYSPATH') or die('No direct script access.');
return array(
	'finalize' => TRUE,
	'preload'  => FALSE,
	'settings' => array(
		/**
		 * Use the application cache for HTML Purifier
		 */
		'HTML.SafeIframe' => true,
		'URI.SafeIframeRegexp' => '%^http://(www.youtube(?:-nocookie)?.com/embed/|player.vimeo.com/video/)%', //allow YouTube and Vimeo
		'HTML.Trusted' => true
	),
);

И при инициализации TinyMce добавить пару параметров:

extended_valid_elements : "div[align|class|style|id|title]",
		extended_valid_elements : "iframe[name|src|framespacing|border|frameborder|scrolling|title|height|width],object[declare|classid|codebase|data|type|codetype|archive|standby|height|width|usemap|name|tabindex|align|border|hspace|vspace]"

Да и напоследок пара своих компоновок кнопок для TinyMce
Короткий вариант:
2013-01-29_135823
Пример: http://cmspegas.ru/guestbook

<script type="text/javascript" src="/tinymce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
        mode : "textareas",
		language : "ru",
		plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
        theme : "advanced",
		extended_valid_elements : "div[align|class|style|id|title]",
		extended_valid_elements : "iframe[name|src|framespacing|border|frameborder|scrolling|title|height|width],object[declare|classid|codebase|data|type|codetype|archive|standby|height|width|usemap|name|tabindex|align|border|hspace|vspace]",
		theme_advanced_buttons1 : "bold,italic,underline,emotions,strikethrough,blockquote,forecolor,formatselect,fontselect,fontsizeselect,link,unlink,|,image,media,|,code,preview,fullscreen",
		theme_advanced_toolbar_align : "left",
        relative_urls : false
});
</script>

Более полный вариант:
2013-01-29_135725

<script type="text/javascript" src="/tinymce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
        mode : "textareas",
		language : "ru",
		plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
        theme : "advanced",
		extended_valid_elements : "div[align|class|style|id|title]",
		extended_valid_elements : "iframe[name|src|framespacing|border|frameborder|scrolling|title|height|width],object[declare|classid|codebase|data|type|codetype|archive|standby|height|width|usemap|name|tabindex|align|border|hspace|vspace]",
		theme_advanced_buttons1 : "bold,italic,underline,emotions,strikethrough,blockquote,forecolor,formatselect,fontselect,fontsizeselect,link,unlink,|,image,media,|,code,preview,fullscreen",
		theme_advanced_buttons2 : "charmap,insertdate,inserttime,|,outdent,indent,|,table,justifyleft,justifycenter,justifyright,bullist,numlist,|,undo,redo,|,pagebreak,print",
		theme_advanced_toolbar_align : "left",
        relative_urls : false
});
</script>

Вот и все ). Имеются вопросы пишем в комментарии постараюсь вам помочь.

Да и примеры можно посмотреть на сайте Pegas CMS http://cmspegas.ru
Готовую версию на git’e я выложу чуть попозже ,сейчас не имею такой возможности.
Спасибо за внимание.

Вам также может понравиться ...