Tpoxa's blog

Explay и TinyMCE

При практическом применении Explay CMS возникла крайняя потребность сменить стандартный редактор (simpleEditor.js)

После не долгих раздумий выбор пал на TinyMCE. Также я решил сразу же подключить редактор картинок для загрузки, ресайзинга изображений на сервер. В качестве image manager я выбрал – Tinybrowser – бесплатный, ничего лишнего, имеет русскую локализацию. Так как в Explay CMS используется Jquery более правильно будет использовать jQuery package

Для того чтобы начать использовать TinyMCE в Вашей Explay CMS надо:

• Скачать TinyMCE с сайта производителя, на момент написания статьи это tinymce_3_2_7_jquery.zip. Там же Вы можете скачать нужный Вам ленг пак;
• Распаковать содержимое папки tinymce/jscripts/ в корень сайта, чтобы получилось вот такая иерархия – http://sitename.com/tiny_mce/tiny_mce.js
• Скачиваем редактор картинок Tinybrowser с сайта автора .
• Распаковываем и заливаем папку tinybrowser в папку plugins TinyMCE
• Скачиваем плагин к TinyMCE написанный мной, который добавляет кнопку «Читать далее» в панель инструментов. Принцип работы схож с тем что в WordPress (собственно оттуда я его и содрал). Единственное что наша кнопка добавяляет тег <cut/> и позволяет его редактировать по надобности.

Теперь нужно вносить изменения в темплейты Explay CMS

Находим и открываем файл /explay/templates/xsl/blogs/forms/posts.xsl

Заменяем

[xml]
<script type="text/javascript" src="{$baseURI}/js/simpleEditor.js" />
[/xml]

на

[xml]
<script type="text/javascript" src="{$baseURI}/tiny_mce/tiny_mce.js"></script>
<script src="{$baseURI}/tiny_mce/plugins/tinybrowser/tb_tinymce.js.php" type="text/javascript"></script>
<script type="text/javascript" src="{$baseURI}/tiny_mce/jquery.tinymce.js"></script>
[/xml]

Потом открываем /explay/templates/xsl/common/form.xsl

заменяем

[jscript]
<script type="text/javascript">
var <xsl:value-of select="$editorName" /> = new SimpleEditor;
</script>
[/jscript]

на

[jscript]
<script type="text/javascript">
$().ready(function() {
$(‘textarea#field_<xsl:value-of select="@id"/>’).tinymce({

script_url : ‘{$baseURI}/tiny_mce/tiny_mce.js’,

theme : "advanced",
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,explay",
theme_advanced_buttons3 :"",
theme_advanced_buttons2 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,fontsizeselect,hr,removeformat|,sub,sup,|,media,fullscreen,|,explay_more",
theme_advanced_buttons1 : "bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",

theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
file_browser_callback : "tinyBrowser"

});
});
</script>
[/jscript]

Код

[xml]
<div class="simple_editor">
<a title="Выделить жирным" onclick="{$editorName}.insertTag (‘b’,null); this.blur();" href="javascript:void(0);"><img src="{$baseURI}/images/editor/b.png" alt="" /></a>
<a title="Выделить курсивом" onclick="{$editorName}.insertTag (‘i’,null); this.blur();" href="javascript:void(0);"><img src="{$baseURI}/images/editor/i.png" alt="" /></a>
<a title="Подчеркнуть" onclick="{$editorName}.insertTag (‘u’,null); this.blur();" href="javascript:void(0);"><img src="{$baseURI}/images/editor/u.png" alt="" /></a>
<a title="Зачеркнуть" onclick="{$editorName}.insertTag (‘s’,null); this.blur();" href="javascript:void(0);"><img src="{$baseURI}/images/editor/s.png" alt="" /></a>
<a title="Параграф" onclick="{$editorName}.insertTag (‘p’,null); this.blur();" href="javascript:void(0);"><img src="{$baseURI}/images/editor/p.png" alt="" /></a>
<a title="Цитата" onclick="{$editorName}.insertTag (‘blockquote’,null); this.blur();" href="javascript:void(0);"><img src="{$baseURI}/images/editor/blockquote.png" alt="" /></a>
<a title="Вставить ссылку" onclick="{$editorName}.insertLink (); this.blur();" href="javascript:void(0);"><img src="{$baseURI}/images/editor/link.png" alt="" /></a>
<a title="Вставить изображение" onclick="{$editorName}.insertImage (); this.blur();" href="javascript:void(0);"><img src="{$baseURI}/images/editor/image.png" alt="" /></a>
<!–a title="Вставить ссылку на пользователя" href="javascript:void(0);" onclick="{$editorName}.insertUserLink (); this.blur();"><img src="{$baseURI}/images/editor/user.png" mce_src="{$baseURI}/images/editor/user.png" alt="" /></a–>
<a title="Вставить видео" onclick="{$editorName}.insertVideo (); this.blur();" href="javascript:void(0);"><img src="{$baseURI}/images/editor/video.png" alt="" /></a>
</div>
[/xml]

Удаляем вовсе.

На этом все.
Также возможно понадобится настроить tinyBrowser.

Спасибо за внимание. Жду комментариев.

></script>