У меня возникла необходимость настроить WYSIWYG редактор TinyMCE в LS, но толковой инструкции по этой теме я на сайте найти не смог, а так как уже порядком подзабыл что там и как, да еще и в связке с LiveStreet — то пришлось разбираться самому. Прочитав все что есть по данной теме здесь, я решил, что будет полезно написать универсальную инструкцию по настройке данного редактора. Всех кого эта тема заинтересовала — прошу под кат.

Задача:

• Добавить возможность вставлять смайлы и таблицы с возможностью их настраивать визуально.
• Добавить отсутстующую возможность быстро (без редактирования HTML кода) вставить теги

<blockquote></blockquote>
<code></сode> 

вот так будет выглядеть наш редактор



(настройка параметров таблицы)

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

Начнем.

1. Включаем сам TinyMCE в конфиге

$config['view']['tinymce'] = true;

2. Открываем файл в котором находится конфигурация TinyMCE. Он находится в:
ваш_сайт/engine/lib/internal/template/js/settings.js
Нас интересует строка 61 которая начинается с this.getTinymce = function(), это и есть конфигурация редактора который вызывается при создании топика.
В ней находим строки theme_advanced_buttons1 и theme_advanced_buttons2.
Если вы ничего не меняли, то строка theme_advanced_buttons2 у вас будет пустая, как вы догадываетесь, она-то и отвечает за вывод второй строки в редакторе.
Что бы добавить нужные нам кнопки (смайлики и редактор таблиц) мы добавим нужные значения в эти строки.
Для вывода смайлов добавим в самый конец theme_advanced_buttons1 значение "emotions"
по умолчанию строка =

theme_advanced_buttons1 : "lshselect,bold,italic,underline,strikethrough,|,bullist,numlist,|,undo,redo,|,lslink,unlink,lsvideo,lsimage,pagebreak,code",

добавим нужное значение и получится =

theme_advanced_buttons1 : "lshselect,bold,italic,underline,strikethrough,|,bullist,numlist,|,undo,redo,|,lslink,unlink,lsvideo,lsimage,pagebreak,code,emotions",

Точно также мы поступим и со вторым значением "tablecontrols", которое выводит кнопку создания таблиц, но добавим мы это значение в строку theme_advanced_buttons2
получится:

theme_advanced_buttons2 : "tablecontrols",

Теперь нам осталось подключить сами плагины в конфигурацию, для этого мы просто добавим 2 значения "emotions" и "table", в строку (она находится чуть ниже):

plugins : "lseditor,safari,inlinepopups,media,pagebreak,autoresize",

у нас получится вот так:

plugins : "lseditor,safari,inlinepopups,media,pagebreak,autoresize,emotions,table",

3. Теперь нужно немного подредактировать файл jevix.php который находится в:
ваш_сайт/config/jevix.php
Это нам нужно для того, что бы движок LS нам разрешил вставлять стиль для таблицы и вложенные теги.
Находим комментарий // Разрешённые параметры тегов и в этом блоке (в самом его конце) находим код:

array(
    'table',
    array('border'=>'#int','cellpadding'=>'#int','cellspacing'=>'#int','align'=>array('right', 'left', 'center'),'height'=>'#int','width'=>'#int')

и в массив перед 'border'=>'#int' вставляем еще один элемент 'style'=>'#text'
У нас получится:

array(
    'table',
    array('style'=>'#text','border'=>'#int','cellpadding'=>'#int','cellspacing'=>'#int','align'=>array('right', 'left', 'center'),'height'=>'#int','width'=>'#int')

теперь находим комментарий // Вложенные теги и в коде:

array(
	'table',
	array('tr'),
	false,
	true
	),

меняем последнее значение «true» на «falce» у нас получится:

array(
	'table',
	array('tr'),
	false,
	false
	),

после этих действий у нас есть работающий визуальный редактор таблиц и возможность вставлять смайлы. Теперь осталось только сделать удобным вставку тегов для цитат и кода, ибо в стандарте в TinyMCE этих тегов нет и их можно вставить только при помощи редактирования HTML.

4. Открываем файл editor_plugin.js, который находится в:
ваш_сайт/engine/lib/external/tinymce-jq/plugins/lseditor/editor_plugin.js
и находим в нем строки (они находятся почти в самом низу):

lb.add('H4', 'h4');
lb.add('H5', 'h5');
lb.add('H6', 'h6');

Нам нужно добавить два значения, для вставки тегов цитат и кода

lb.add('Цитата', 'blockquote');
lb.add('Код', 'code');

В итоге у нас получится вот так:

lb.add('Цитата', 'blockquote');
lb.add('Код', 'code');
lb.add('H4', 'h4');
lb.add('H5', 'h5');
lb.add('H6', 'h6');

результат в редакторе будет выглядеть так:


еще одна маленькая подробность… по умолчанию этот список называется не "Теги" (как на изображении), а «Заголовок», что бы пользователи поняли где им искать теги для цитат и кода я переименовал его. Для этого нам нужно открыть файл локализации ru.js который находится в:
ваш_сайт/engine/lib/external/tinymce-jq/plugins/lseditor/langs/ru.js
и найти в нем строку:

hselect_title: '\u0417\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A',

и меняем ее на:

hselect_title: '\u0422\u0435\u0433\u0438',

Для тех кто не знает что это такое — объсню:
хитрость в том, что всю кириллицу нужно обязательно переводить в escape-последовательности. т.е. «Привет мир» будет выглядеть "\u041F\u0440\u0438\u0432\u0435\u0442\u043C\u0438\u0440"

Ну вот в принципе и все. Подключение остальных плагинов TinyMCE делается по аналогии с выше описанной последовательностью, также не стоит забывать о фильтрации тегов, которая определяется в файле jevix.php.
Все доступные плагины находятся в /engine/lib/external/tinymce-jq/plugins/, также можно посмотреть обновления самого редактора и наличие новых плагинов на оф.странице TinyMCE www.tinymce.com/download/download.php
Документация (на английском) по плагинам TinyMCE и их параметрам здесь:
www.tinymce.com/wiki.php/Plugins
Инструмент для перевода в любые кодировки, в том числе и JavaScript escapes здесь:
rishida.net/tools/conversion/

Надеюсь мой топик поможет тем, кто захочет кастомизировать редактор в LS. На вопросы, коли таковые будут, с удовольствием отвечу в комментариях.