Подключение визуального редактора к 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 — скрипт

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

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

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

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

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

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

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

И при инициализации TinyMce добавить пару параметров:
<br />
extended_valid_elements : &quot;div[align|class|style|id|title]&quot;,<br />
		extended_valid_elements : &quot;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]&quot;<br />

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

<br />
&lt;script type=&quot;text/javascript&quot; src=&quot;/tinymce/tiny_mce.js&quot;&gt;&lt;/script&gt;<br />
&lt;script type=&quot;text/javascript&quot;&gt;<br />
tinyMCE.init({<br />
        mode : &quot;textareas&quot;,<br />
		language : &quot;ru&quot;,<br />
		plugins : &quot;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&quot;,<br />
        theme : &quot;advanced&quot;,<br />
		extended_valid_elements : &quot;div[align|class|style|id|title]&quot;,<br />
		extended_valid_elements : &quot;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]&quot;,</p>
<p>		theme_advanced_buttons1 : &quot;bold,italic,underline,emotions,strikethrough,blockquote,forecolor,formatselect,fontselect,fontsizeselect,link,unlink,|,image,media,|,code,preview,fullscreen&quot;,</p>
<p>		theme_advanced_toolbar_align : &quot;left&quot;,<br />
        relative_urls : false</p>
<p>});<br />
&lt;/script&gt;<br />

Более полный вариант:
2013-01-29_135725
<br />
&lt;script type=&quot;text/javascript&quot; src=&quot;/tinymce/tiny_mce.js&quot;&gt;&lt;/script&gt;<br />
&lt;script type=&quot;text/javascript&quot;&gt;<br />
tinyMCE.init({<br />
        mode : &quot;textareas&quot;,<br />
		language : &quot;ru&quot;,<br />
		plugins : &quot;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&quot;,<br />
        theme : &quot;advanced&quot;,<br />
		extended_valid_elements : &quot;div[align|class|style|id|title]&quot;,<br />
		extended_valid_elements : &quot;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]&quot;,</p>
<p>		theme_advanced_buttons1 : &quot;bold,italic,underline,emotions,strikethrough,blockquote,forecolor,formatselect,fontselect,fontsizeselect,link,unlink,|,image,media,|,code,preview,fullscreen&quot;,<br />
		theme_advanced_buttons2 : &quot;charmap,insertdate,inserttime,|,outdent,indent,|,table,justifyleft,justifycenter,justifyright,bullist,numlist,|,undo,redo,|,pagebreak,print&quot;,</p>
<p>		theme_advanced_toolbar_align : &quot;left&quot;,<br />
        relative_urls : false</p>
<p>});<br />
&lt;/script&gt;<br />

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

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

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