Настройка TinyMce в MaxSite CMS

Продолжу.

tiny-maxTinyMce, довольно продвинутый визуальный редактор с большим количеством опций настроек.  Каждый может подогнать под свои потребности и настроить индивидуально исходя из особенностей сайта.

В дистрибутиве TinyMce в каталоге examples можно найти примеры настройки редактора или по аналогии настроить под себя,  для удобной работы с сайтом.

В файле full.html – полнофункциональный пример, в файле accessibility.html пример конфигурации с браузерными стилями и повышенной контрастностью текста, в файле пример custom_formats.html  пример конфигурации показывающий как переопределить кнопки стандартного форматирования из стилей в классы.

Я ниже приведу минимальную (на мой взгляд) конфигурацию для работы TinyMce в MaxSite cms, для редактирования текста и вставки картинок.

Итак. Минимальная панель редактора без явно прописанных кнопок и плагинов в конфигурационном файле плагина в моем случае editor.php выглядит следующим образом.

Панель TinyMce по умолчанию

Для начала, пропишем в нем тот порядок кнопок, что выдается по умолчанию.

Первый ряд:

bold - жирный

italic - курсив

underline - подчеркнутый

strikethrough – зачеркнутый

justifyleft - выравнивание по левому краю

justifycenter - выравнивание по центру

justifyright - выравнивание по правому краю

justifyfull - выравнивание по ширине

styleselect - выбор стилей

formatselect - выбор формата текста

Второй ряд:

bullist - маркированный список

numlist - нумерованный список

outdent - сдвинуть влево

indent - сдвинуть вправо

undo - отмена последнего действия

redo - возврат отмены

link - вставить ссылку

unlink - убрать ссылку

anchor - добавить/изменить якорь

image - вставить изображение

cleanup - чистка кода

help - вызов помощи редактора

code - редактор html-кодов

Третий ряд:

hr - вставка горизонтальной линии

removeformat - убрать форматирование

visualaid - все знаки

sub - шрифт в виде нижнего индекса

sup - шрифт в виде верхнего индекса

charmap - добавление символов

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

У нас получится следующий конфигурационный файл editor.php:

<?php  if (!defined('BASEPATH')) exit('No direct script access allowed');


?>
    <!-- TinyMCE -->
    <script type="text/javascript" src="<?= $editor_config['url'] ?>tiny_mce/tiny_mce.js"></script>
    <script type="text/javascript">
    tinyMCE.init({
        // General options
        mode: "exact",
        elements : "elm1",
        theme : "advanced",
        skin : "o2k7",
        language : "ru",
        doctype : '<!DOCTYPE HTML>',
        element_format :  "html",
        document_base_url : "<?php getinfo('siteurl') ?>",
//======================

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


        theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect",
        theme_advanced_buttons2 : "bullist,numlist,|,outdent,indent,|,undo,redo,|,link,unlink,|,anchor,|,image,|,cleanup,|,help,|,code",
        theme_advanced_buttons3 : "hr,|,removeformat,|,visualaid,|,sub,sup,|,charmap",

          // Style formats
        style_formats : [
            {title : 'Bold text', inline : 'b'},
            {title : 'Red text', inline : 'span', styles : {color : '#ff0000'}},
            {title : 'Red header', block : 'h1', styles : {color : '#ff0000'}},
            {title : 'Example 1', inline : 'span', classes : 'example1'},
            {title : 'Example 2', inline : 'span', classes : 'example2'},
            {title : 'Table styles'},
            {title : 'Table row 1', selector : 'tr', classes : 'tablerow1'}
        ],



    });
</script>
<!-- /TinyMCE -->
<form method="post" <?= $editor_config['action'] ?> >
<?= $editor_config['do'] ?>
<textarea id="elm1" name="f_content" style="height: <?= $editor_config['height'] ?>px; width: 100%;" ><?= $editor_config['content'] ?></textarea>
<?= $editor_config['posle'] ?>
</form>

Проверяем. Если всё работает идем дальше.

На самом деле по умолчанию без дополнительных плагинов можно задействовать большее количество кнопок для форматирования. Доступные же кнопки можно посмотреть на офсайте wiki Buttons,  расширения конфигурационного файла Configuration и Plugins.

Моя шпаргалка КНОПОК:

===== Кнопки не требующие плагинов ===========
bold - жирный
italic - курсив
underline - подчеркнутый
strikethrough - зачеркнутый
justifyleft - выравнивание по левому краю
justifycenter - выравнивание по центру
justifyright - выравнивание по правому краю
justifyfull - выравнивание по ширине
bullist - маркированный список
numlist - нумерованный список
outdent - сдвинуть влево
indent - сдвинуть вправо
cut - вырезать
copy - копировать
paste - вставить
undo - отмена последнего действия
redo - возврат отмены
link - вставить ссылку
unlink - убрать ссылку
image - вставить изображение
cleanup - чистка кода
help - вызов помощи редактора
code - редактор html-кодов
hr - вставка горизонтальной линии
removeformat - убрать форматирование
formatselect - выбрать формат текста
fontselect - выбрать шрифт
fontsizeselect - выбрать размер шрифта
styleselect - выбрать стиль
sub - шрифт в виде нижнего индекса
sup - шрифт в виде верхнего индекса
forecolor - цвет шрифта
backcolor - цвет фона шрифта
forecolorpicker - вызов палитры цвета шрифта
backcolorpicker - вызов палитры цвета фона шрифта
charmap - добавление символов
visualaid - все знаки
anchor - добавить/изменить якорь
newdocument - новый документ
blockquote - цитата
separator ( ,|, ) - разделитель

==== Кнопки по названию плагина ==========
advhr - расширенное форматирование горизонтальной линии
emotions - смайлики
fullpage - свойство документа
fullscreen - полноэкранный режим
iespell - проверка орфографии только в IE
media - вставка видео
nonbreaking - добавить неразрывный пробел
pagebreak - разрыв страницы
preview - предпросмотр
print - печать
spellchecker - проверка орфографии
visualchars - все значки

=== Плагины с добавлением доп. кнопок или расширяют форматирование
advlink - расширенное форматирование ссылок
advimage - расширенное форматирование изображений
paste - вставка из других форматов:,paste,pastetext,pasteword,
searchreplace - добавляются кнопки поиск и замена: ,search,replace,
insertdatetime - добавляются кнопки вставки даты и времени: insertdate,inserttime
table - таблица: tablecontrols,table,row_props,cell_props,delete_col,delete_row,col_after,
col_before,row_after,row_before,split_cells,merge_cells
directionality - добавляются кнопки направления текста: ,ltr,rtl,
layer - много кнопок для форматирования слоев:,insertlayer,moveforward,movebackward,absolute,
save - добавляются кнопки сохранение и отмены изменений:,save,cancel,
style - кнопка редактора стилей:,styleprops,
xhtmlxtras - добавляются кнопки элементов XHTML: cite,abbr,acronym,ins,del,attribs,
template - кнопка вывода подготовленного шаблона:template

Перейдем сейчас непосредственно к MaxSite CMS. На мой взгляд к каждому сайту желательно прописывать свой конфигурационный файл, но попробую выделить некоторые общие моменты.

В maxsite cms существует такой элемент как cut, разрывающий страницу для анонса. Чтобы данный элемент задействовать в редакторе задействуем плагин pagebreak и пропишем к нему правило:

plugins: "pagebreak",
pagebreak_separator : "cut в квадратных скобках",

Ну и подключим Cyber Image Manager файловый менеджер изображений.

Для этого скачиваем http://cyberapp.ru/cyber-image-manager/ с офсайта, загружаем в каталог с плагинами tinymce, переименовываем в cyberim, открываем конфигурационный файл config.php и прописываем там путь к каталогу uploads MaxSite CMS

  File System options

*/

//путь для заключительного url

//$conf['filesystem.path'] = 'http://адрес сайта/uploads/';

//можно и так

$conf['filesystem.path'] = '/uploads/';

//относительный путь к файлам пользователя

$conf['filesystem.files_path'] = '../../../../../../../uploads/';

И пропишем имя плагина в строчку с плагинами. Всё. Данный плагин должен заработать.

cyberim

Далее можно прописать стили, к примеру, абзаца без отступов - замена <br>, так как в данной редакции конфига он преобразуется в абзац.

{title : 'br-p', block : 'p', classes : 'br-p'}, 

Не забываем его добавить в основной файл стилей:

.br-p {margin:0px; padding:0px;}

Добавим ещё немного плагинов и кнопок и получим тестовый, но вполне рабочий конфигурационный файл визуального редактора TinyMce к MaxSite CMS editor.php.

 <?php  if (!defined('BASEPATH')) exit('No direct script access allowed');
     ?>
         <!-- TinyMCE -->
         <script type="text/javascript" src="<?= $editor_config['url'] ?>tiny_mce/tiny_mce.js"></script>
         <script type="text/javascript">
         tinyMCE.init({
             // General options
             mode: "exact",
             elements : "elm1",
             theme : "advanced",
             skin : "o2k7",
             language : "ru",
             doctype : '<!DOCTYPE HTML>',
             element_format :  "html",
             document_base_url : "<?php getinfo('siteurl') ?>",
              //убираем относительные пути url
            relative_urls : false,
            convert_urls : false,
            remove_script_host : false,
            remove_linebreaks : true,
             //===== Плагины ========
            plugins: "pagebreak,fullscreen,media,advimage,paste,searchreplace,advlink,cyberim",
     //===== Оформление темы ========
             theme_advanced_toolbar_location : "top",
             theme_advanced_toolbar_align : "left",
             theme_advanced_statusbar_location : "bottom",
             theme_advanced_resizing : true,
             theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect",
             theme_advanced_buttons2 : "bullist,numlist,|,outdent,indent,|,undo,redo,|,link,unlink,|,anchor,|,image,|,cleanup,|,help,|,code",
             theme_advanced_buttons3 : "hr,|,removeformat,|,visualaid,|,sub,sup,|,charmap",
              //добавочные
         theme_advanced_buttons1_add :"fontselect,fontsizeselect,forecolorpicker,backcolorpicker",
         theme_advanced_buttons2_add :",|,pasteword,|,search,replace",
         theme_advanced_buttons3_add :"pagebreak,fullscreen",
         theme_advanced_font_sizes : "9px,10px,11px,12px,13px,14px,15px,16px,17px,18px,19px,20px,21px,22px,23px,24px",
         //* плагин - pagebreak - разрыв страницы
         pagebreak_separator : "!!! в квадратных скобках !!! cut",
          //можно добавить div
       theme_advanced_blockformats : "div,p,address,code,pre,h1,h2,h3,h4,h5,h6",
       //путь к файлу со стилями отображаемые в редакторе
       content_css : src="<?= $editor_config['url'] ?>tiny_mce.css",
               // Style formats
             style_formats : [
                 {title : 'br-p', block : 'p', classes : 'br-p'},
                 {title : 'Bold text', inline : 'b'},
                 {title : 'Red text', inline : 'span', styles : {color : '#ff0000'}},
                 {title : 'Red header', block : 'h1', styles : {color : '#ff0000'}},
                 {title : 'Example 1', inline : 'span', classes : 'example1'},
                 {title : 'Example 2', inline : 'span', classes : 'example2'},
                 {title : 'Table styles'},
                 {title : 'Table row 1', selector : 'tr', classes : 'tablerow1'}
             ],
         });
     </script>
     <!-- /TinyMCE -->
     <form method="post" <?= $editor_config['action'] ?> >
     <?= $editor_config['do'] ?>
     <textarea id="elm1" name="f_content" style="height: <?= $editor_config['height'] ?>px; width: 100%;" ><?= $editor_config['content'] ?></textarea>
     <?= $editor_config['posle'] ?>
     </form>

Прошу обратить внимание в написании правила в примере для cut, не смог должным образом оформить квадратные скобки [], чтобы не влияли на код. В данном случае строка 38.

tiny-test

PS. Убрал тестовую сборку для скачки, как будет готова сборка применима к default шаблону, выложу, чтобы не было недоразумений.