Настройка TinyMCE в LiveStreet (универсальная инструкция)
У меня возникла необходимость настроить WYSIWYG редактор TinyMCE в LS, но толковой инструкции по этой теме я на сайте найти не смог, а так как уже порядком подзабыл что там и как, да еще и в связке с LiveStreet — то пришлось разбираться самому. Прочитав все что есть по данной теме здесь, я решил, что будет полезно написать универсальную инструкцию по настройке данного редактора. Всех кого эта тема заинтересовала — прошу под кат.
Задача:
вот так будет выглядеть наш редактор
![](http://livestreet.ru/uploads/images/01/52/62/2012/11/24/c269a4.png)
![(настройка параметров таблицы)](http://livestreet.ru/uploads/images/01/52/62/2012/11/24/caecf8.png)
(настройка параметров таблицы)
Как вы можете заметить, мы добавим вторую строку на панели редактора и разместим там кнопки для создания таблиц, а в первой строке добавим кнопку для вставки смайлов.
Начнем.
1. Включаем сам TinyMCE в конфиге
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"
по умолчанию строка =
добавим нужное значение и получится =
Точно также мы поступим и со вторым значением "tablecontrols", которое выводит кнопку создания таблиц, но добавим мы это значение в строку theme_advanced_buttons2
получится:
Теперь нам осталось подключить сами плагины в конфигурацию, для этого мы просто добавим 2 значения "emotions" и "table", в строку (она находится чуть ниже):
у нас получится вот так:
3. Теперь нужно немного подредактировать файл jevix.php который находится в:
ваш_сайт/config/jevix.php
Это нам нужно для того, что бы движок LS нам разрешил вставлять стиль для таблицы и вложенные теги.
Находим комментарий // Разрешённые параметры тегов и в этом блоке (в самом его конце) находим код:
и в массив перед 'border'=>'#int' вставляем еще один элемент 'style'=>'#text'
У нас получится:
теперь находим комментарий // Вложенные теги и в коде:
меняем последнее значение «true» на «falce» у нас получится:
после этих действий у нас есть работающий визуальный редактор таблиц и возможность вставлять смайлы. Теперь осталось только сделать удобным вставку тегов для цитат и кода, ибо в стандарте в TinyMCE этих тегов нет и их можно вставить только при помощи редактирования HTML.
4. Открываем файл editor_plugin.js, который находится в:
ваш_сайт/engine/lib/external/tinymce-jq/plugins/lseditor/editor_plugin.js
и находим в нем строки (они находятся почти в самом низу):
Нам нужно добавить два значения, для вставки тегов цитат и кода
В итоге у нас получится вот так:
результат в редакторе будет выглядеть так:
![](http://livestreet.ru/uploads/images/01/52/62/2012/11/24/67236c.png)
еще одна маленькая подробность… по умолчанию этот список называется не "Теги" (как на изображении), а «Заголовок», что бы пользователи поняли где им искать теги для цитат и кода я переименовал его. Для этого нам нужно открыть файл локализации ru.js который находится в:
ваш_сайт/engine/lib/external/tinymce-jq/plugins/lseditor/langs/ru.js
и найти в нем строку:
и меняем ее на:
Для тех кто не знает что это такое — объсню:
хитрость в том, что всю кириллицу нужно обязательно переводить в 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. На вопросы, коли таковые будут, с удовольствием отвечу в комментариях.
Задача:
- Добавить возможность вставлять смайлы и таблицы с возможностью их настраивать визуально.
- Добавить отсутстующую возможность быстро (без редактирования HTML кода) вставить теги
<blockquote></blockquote>
<code></сode>
вот так будет выглядеть наш редактор
![](http://livestreet.ru/uploads/images/01/52/62/2012/11/24/c269a4.png)
![(настройка параметров таблицы)](http://livestreet.ru/uploads/images/01/52/62/2012/11/24/caecf8.png)
(настройка параметров таблицы)
Как вы можете заметить, мы добавим вторую строку на панели редактора и разместим там кнопки для создания таблиц, а в первой строке добавим кнопку для вставки смайлов.
Начнем.
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');
результат в редакторе будет выглядеть так:
![](http://livestreet.ru/uploads/images/01/52/62/2012/11/24/67236c.png)
еще одна маленькая подробность… по умолчанию этот список называется не "Теги" (как на изображении), а «Заголовок», что бы пользователи поняли где им искать теги для цитат и кода я переименовал его. Для этого нам нужно открыть файл локализации 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. На вопросы, коли таковые будут, с удовольствием отвечу в комментариях.
36 комментариев
Спасибо за инструкцию, даже в платном плагине, который я покупал нет таблицы.
Насчет плагинов не уверен, но если они используют стандартный функционал LS — то вполне вероятно.
Мое решение — это маленький пример как можно настроить вручную все доступные функции TinyMCE и используя эту информацию можно добиться намного большего чем возможности плагина «TinyMce+».
ваш_сайт/engine/lib/internal/template/js/settings.js
и
ваш_сайт/config/jevix.php
В редакторе кнопки не появились подскажите в какую сторону копать, если можно дайте уже измененные
файлы, чтобы исключить ошибки при изменении кода.
Для этого просто пропиши в settings.js дополнительные темы и плагины для редактора. Вот инструкция.
И получится вот такая панель, там все есть:
Если не слишком затруднит можно и для комментариев такой же набор?
У меня бяда — сделал все по статье этой — нету каринок загрузки картинок в каменты (( не могу никак сделать.
Делаю каменты по примеру статьи — слетает панель вообще.
ваш_сайт/engine/lib/internal/template/js/settings.js
Делал как написано тут. Естественно нужно включить редактор Тини.
И еще бывает сразу не отображается — кэшируется. Поэтому сделайте и почистите и подождите все должно заработать.
Что делать?
работаю с нужными файлами, на версии 1.0.1
и все изменения по вышеуказанной инструкции, но ничего не изменилось.
Работаю на 1.0.3 версии.
LS 1.0
Появилась надобность чтобы при нажатии ENTER определялся текстовый абзац, а не переход строки и перед сообщением вставлялся пустой обзац.
пример:
Я не прошу готового решения, подскажите хотя бы файл где копать.
Когда в конфиге ставлю true; редактор новый должен сразу появиться? У меня не появимлся
Как было так все и осталось ((
у меня в браузере. И это какбы не ошибка адаптации плагина а проблемы самой версии tinymce. Альтернативный вариант — использовать flash прослойку для работы с буфером но на айпадах работать не будет т.к. флеша там нету. Если найдете другое решение то буду рад посмотреть на его реализацию