MarkitUP для новичков. Или как добавить свои кнопки в редактор? [Перепост]

Перепост давно почившего из DB, но полезного топика (битые ссылки убрал).
По мотивам: этого топика и этого комментария, спасибо lifecom .

1. Введение

Заголовок говорит сам за себя — данная статья это итоги моего ковыряния в редакторе MarkitUP.
Все началось с того, что на сайте сообщества появилась небольшая статья о том как добавить кнопку в редактор (точнее это был вопрос) и в комментариях пользователь Shrike дал очень важные для меня наводки. После этого у меня появилась идея добавить пару новых возможностей в редактор:

  1. Цвет текста
  2. Выравнивания текста по центру, левому краю, правому краю
  3. Вертикальное выравнивание текста (sub, sup)


Их работу вы можете увидеть на скринах. Сразу хочу сказать, что если вам нужен такой редактор, как на скрине выше, и вы не хотите лазить в код, то вот прямая ссылка на архив (в архиве есть readme по установке). Если же вам интересен сам процесс — то читаем дальше.

2. Цели и задачи

Итак, мне нужно было добавить 5 кнопок:
[Вот вам и селектор :)]

  1. Выпадающий блок с селектором цвета
  2. Выравнивание по левому краю
  3. Выравнивание по центру
  4. Выравнивание по правому краю
  5. Вертикальное выравнивание SUB
  6. Вертикальное выравнивание SUP


Самым легким для меня казалось горизонтальное выравнивание текста, которое я решил делать через div align="..."

Вертикальное выравнивание текста я делал соответствующими тегами sub и sup, предварительно настроив их стили в reset.css, т.к. по стандарту их функции там «убивают» через vertical-align: baseline;

Самым сложным для меня было сделать возможность менять цвет текста. К счастью, покопавшись на оф. сайте, я нашел дополнение к редактору, которое как раз и выполняло нужные мне функции — Tango palette.

Итак, составив себе план действий, я принялся за его исполнение…

3. Ход работы



3.1 Горизонтальное выравнивание текста
Первое что я сделал — добавил в /config/jevix.php исключения для тега div с параметром align (left, center, right). Для этого в файле /config/jevix.php делаем следующее:

1) Находим в самом начале
// вызов метода с параметрами
                        array(
                                array('ls','cut','a', 'img', 'i', 'b', 'u', 's', 'video', 'em',  'strong', 'nobr', 'li', 'ol', 'ul', 'sup', 'abbr', 'sub', 'acronym', 'h4', 'h5', 'h6', 'br', 'hr', 'pre', 'code', 'object', 'param', 'embed', 'blockquote', 'iframe')

и добавляем в конце массива через запятую (после 'iframe') нужный нам тег 'div', чтобы получилось так:
// вызов метода с параметрами
                        array(
                                array('ls','cut','a', 'img', 'i', 'b', 'u', 's', 'video', 'em',  'strong', 'nobr', 'li', 'ol', 'ul', 'sup', 'abbr', 'sub', 'acronym', 'h4', 'h5', 'h6', 'br', 'hr', 'pre', 'code', 'object', 'param', 'embed', 'blockquote', 'iframe', 'div'),


Ниже в этом же файле, после
array(
                                'img',
                                array('src', 'alt' => '#text', 'title', 'align' => array('right', 'left', 'center', 'middle'), 'width' => '#int', 'height' => '#int', 'hspace' => '#int', 'vspace' => '#int', 'class'=> array('image-center'))

добавляем
array(
                                'div',
                                array('align'=> array('left','center','right'))
                        ),


Итак, сами теги div начали работать в редакторе и парсер их не съедал, теперь мне нужно было добавить сами кнопки непосредственно в редактор. Для этого я добавил в файл /templates/skin/ВАШ ШАБЛОН/js/markup_settings.js, который отвечает непосредственно за сам редактор, данные об этих 3-ех кнопках (их нужно вставить в 2 места — для редактора постов и для редактора комментариев, если нужно, чтобы эти кнопки были и там и там):
{name: ls.lang.get('panel_left'), className:'editor-left', openWith:'<div align="left">', closeWith:'</div>' },
{name: ls.lang.get('panel_center'), className:'editor-center', openWith:'<div align="center">', closeWith:'</div>' },
{name: ls.lang.get('panel_right'), className:'editor-right', openWith:'<div align="right">', closeWith:'</div>' },


Сейчас у нас были даже сами кнопки, только вот они были «невидимыми», и чтобы сделать их полноценными кнопками мне осталось добавить только сами иконки. Для этого я нашел в Интернете небольшой пак с иконками и нарыл оттуда 3 иконки с выравниванием текста:

Эти 3 кнопки я добавил в /engine/lib/external/jquery/markitup/sets/default/images/, а стили кнопок я прописал в /engine/lib/external/jquery/markitup/sets/default/style.css:
.markItUp .editor-left a        { background-image:url(images/edit-alignment.png); }
.markItUp .editor-right a       { background-image:url(images/edit-alignment-right.png); }
.markItUp .editor-center a      { background-image:url(images/edit-alignment-center.png); }


На этом первый «раунд» был закончен.

3.2 Вертикальное выравнивание текста

Здесь делаем все по аналогии, единственное, что теги sub и sup уже разрешены в jevix.php по умолчанию, но запрещены в reset.css шаблона, что, по-моему, очень странно. Поэтому, для начала мы отредактируем файл /templates/skin/ВАШ ШАБЛОН/css/reset.css. Для начала из длинного списка тегов
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote... 


удаляем sup, sub, и в конец файла добавляем правильные значения
sup{ vertical-align:super }
sub{ vertical-align:sub }


Сейчас теги SUP, SUB уже работают в тексте и, опять же, нам нужно просто добавить сами кнопки в редактор, но мы то уже знаем как это делать.
В файле /templates/skin/ВАШ ШАБЛОН/js/markup_settings.js добавляем (в 2 места, если нужно чтобы было и в комментариях и в топиках):
{name: ls.lang.get('panel_sub'), className:'editor-sub', openWith:'<sub>', closeWith:'</sub>' },
{name: ls.lang.get('panel_sup'), className:'editor-sup', openWith:'<sup>', closeWith:'</sup>' },


Вставляем еще 2 иконки в /engine/lib/external/jquery/markitup/sets/default/images/, а стили кнопок прописываем в /engine/lib/external/jquery/markitup/sets/default/style.css:
.markItUp .editor-sub a  { background-image:url(images/edit-subscript.png); }
.markItUp .editor-sup a  { background-image:url(images/edit-superscript.png); }


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

3.3 Цветовой селектор


Как я уже ранее сказал, покопавшись на сайте автора MarkitUP, я нашел интересное дополнение которое как раз и предназначено для изменения цвета текста. Его оставалось немного адаптировать и прикрутить к нашему редактору, чем я и занялся.

Дополнение Palette вставляло в текст просто выбранный цвет, поэтому мне потребовалось решить через какой тег менять цвет. Чтобы не заморачиваться, я решил использовать старый, добрый font color="#...".
Для начала я добавил в /config/jevix.php исключение для тега font (добавляем 'font' через запятую сразу после нашего тега 'div' как в первом примере) с нужными нам параметрами:
array(
                                'font',
                                array('color'=> array('#FCE94F','#EDD400','#C4A000',
                                                      '#FCAF3E','#F57900','#CE5C00',
                                                      '#E9B96E','#C17D11','#8F5902',
                                                      '#8AE234','#73D216','#4E9A06',
                                                      '#729FCF','#3465A4','#204A87',
                                                      '#AD7FA8','#75507B','#5C3566',
                                                      '#EF2929','#CC0000','#A40000',
                                                      '#FFFFFF','#D3D7CF','#BABDB6',
                                                      '#888A85','#555753','#000000',))


Дальше я добавил код из дополнения в наш любимый /templates/skin/ВАШ ШАБЛОН/js/markup_settings.js:
{       name:'Colors', className:'palette', dropMenu: [
                                {name:'Yellow', openWith:'<font color="#FCE94F">', closeWith:'</font>',         className:"col1-1" },
                                {name:'Yellow', openWith:'<font color="#EDD400">', closeWith:'</font>',         className:"col1-2" },
                                {name:'Yellow', openWith:'<font color="#C4A000">', closeWith:'</font>',         className:"col1-3" },
                                
                                {name:'Orange', openWith:'<font color="#FCAF3E">', closeWith:'</font>',         className:"col2-1" },
                                {name:'Orange', openWith:'<font color="#F57900">', closeWith:'</font>',         className:"col2-2" },
                                {name:'Orange', openWith:'<font color="#CE5C00">', closeWith:'</font>',         className:"col2-3" },
                                
                                {name:'Brown',  openWith:'<font color="#E9B96E">', closeWith:'</font>',         className:"col3-1" },
                                {name:'Brown',  openWith:'<font color="#C17D11">', closeWith:'</font>',         className:"col3-2" },
                                {name:'Brown',  openWith:'<font color="#8F5902">', closeWith:'</font>',         className:"col3-3" },
                                
                                {name:'Green',  openWith:'<font color="#8AE234">', closeWith:'</font>',         className:"col4-1" },
                                {name:'Green',  openWith:'<font color="#73D216">', closeWith:'</font>',         className:"col4-2" },
                                {name:'Green',  openWith:'<font color="#4E9A06">', closeWith:'</font>',         className:"col4-3" },
                                
                                {name:'Blue',   openWith:'<font color="#729FCF">', closeWith:'</font>',         className:"col5-1" },
                                {name:'Blue',   openWith:'<font color="#3465A4">', closeWith:'</font>',         className:"col5-2" },
                                {name:'Blue',   openWith:'<font color="#204A87">', closeWith:'</font>',         className:"col5-3" },
        
                                {name:'Purple', openWith:'<font color="#AD7FA8">', closeWith:'</font>',         className:"col6-1" },
                                {name:'Purple', openWith:'<font color="#75507B">', closeWith:'</font>',         className:"col6-2" },
                                {name:'Purple', openWith:'<font color="#5C3566">', closeWith:'</font>',         className:"col6-3" },
                                
                                {name:'Red',    openWith:'<font color="#EF2929">', closeWith:'</font>',         className:"col7-1" },
                                {name:'Red',    openWith:'<font color="#CC0000">', closeWith:'</font>',         className:"col7-2" },
                                {name:'Red',    openWith:'<font color="#A40000">', closeWith:'</font>',         className:"col7-3" },
                                
                                {name:'Gray',   openWith:'<font color="#FFFFFF">', closeWith:'</font>',         className:"col8-1" },
                                {name:'Gray',   openWith:'<font color="#D3D7CF">', closeWith:'</font>',         className:"col8-2" },
                                {name:'Gray',   openWith:'<font color="#BABDB6">', closeWith:'</font>',         className:"col8-3" },
                                
                                {name:'Gray',   openWith:'<font color="#888A85">', closeWith:'</font>',         className:"col9-1" },
                                {name:'Gray',   openWith:'<font color="#555753">', closeWith:'</font>',         className:"col9-2" },
                                {name:'Gray',   openWith:'<font color="#000000">', closeWith:'</font>',         className:"col9-3" }
                        ]
                },

*

— повторюсь, что все коды, которые мы добавляли в файл markup_settings.js нужно добавлять 2 раза, если вы хотите, чтобы новые кнопки были доступны и в комментариях.


Теперь нам осталось добавить стиль для кнопки. Вставляем еще 1 иконку в /engine/lib/external/jquery/markitup/sets/default/images/, а стиль селектора цвета прописываем в /engine/lib/external/jquery/markitup/sets/default/style.css

4. Вывод


Данную фичу я пробовал на шаблонах new-jquery и social-jquery по типу «залить новые файлы, перезаписывая старые и не лезть самому в код» — и все работает.
В статье я показал как добавлять кнопки в редактор. Информация конечно далеко не новая, но, в любом случае, возможно новичкам она пригодится. От себя хочу сказать — обязательно навестите раздел с дополнениями к MarkitUP, вы там найдете много интересного.

Кое-что еще
В новой версии LS (тобишь начиная с версии LS 0.6) файл настроек будет лежать здесь — /engine/lib/internal/template/js/settings.js и вызываться так:
ls.settings.getMarkitup()


Всем спасибо за внимание, с ув. Frankenstein ;)
Начните свой бизнес с терминалов оплаты. Качественная и быстрая http://установка-терминалов-оплаты.рф/. Индивидуальный подход к каждому клиенту.

8 комментариев

avatar
по моему это не совсем актуально для 1.0.3
avatar
Не пробовали скины ставить?
avatar
Добавил кнопки, выравнивание по краям и по центру работает, не работает выравнивание по ширине.
Хотя прописал так
array('align'=> array('left','center','right','justify'))
. Кнопка добавилась, при нажатии текст обрамляется
<div align="justify">....текст.....</div>
но не форматирует по ширине… все равно полевому краю остается. Кто знает помогите пожалуйста.
Проделал на LS 1.0.3.
avatar
М-да! Для 1.0.3 канает тока горизонтальное выравнивание. Вертикаль и колор надо как-то по другому прикручивать…
avatar
Руки себе ребят равняйте!) я все сделал в легкую? что написал автор!
все подходит для ls 1.0.3, спасибо!)
avatar
А где на LS 1.0.3 файл markup_settings.js Что то не нашел его…
avatar
/engine/lib/internal/template/js/settings.js
ls.settings.getMarkitup()
avatar
Благодарю, всё отлично получилось.
В описании есть пару ошибок синтаксиса — ( скобка или запятая ) — легко правится на практике.: )
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.