Cotonti: добавляем новую кнопку и BBCode в редактор MarkItUp!

Этот простой урок поможет вам добавить любые дополнительные кнопки к редактору маркитап

Добавляем кнопки в редактор Markitup

Рассмотрим простую задачу добавления кнопки в редактор MarkItUp! на примере привычных со времен Seditio блоков colleft и colright, создающих соответственно правое и левое обтекание для обрамляемого блока (обычно картинки).

Первое, что нам понадобится -- это файл plugins/markitup/js/set.js. Переменная mySettings отвечает за стандартный расширенный набор иконок, mini -- за усеченный набор, используемый в коментариях. В первой находим подходящее место для вставки наших кнопок:

{name: L.align, className: 'mAlign',
 dropMenu: [
  {name: L.center, className: 'mCenter', openWith: '[center]', closeWith: '[/center]'},
  {name: L.justify, className: 'mJustify', openWith: '[justify]', closeWith: '[/justify]'},
  {name: L.left, className: 'mLeft', openWith: '[left]', closeWith: '[/left]'},
  {name: L.right, className: 'mRight', openWith: '[right]', closeWith: '[/right]'}
]},

Добавим две новые кнопки по аналогии:

{name: L.align, className: 'mAlign',
 dropMenu: [
  {name: L.center, className: 'mCenter', openWith: '[center]', closeWith: '[/center]'},
  {name: L.justify, className: 'mJustify', openWith: '[justify]', closeWith: '[/justify]'},
  {name: L.left, className: 'mLeft', openWith: '[left]', closeWith: '[/left]'},
  {name: L.right, className: 'mRight', openWith: '[right]', closeWith: '[/right]'}
  {name: L.colleft, className: 'mColleft', openWith: '[colleft]', closeWith: '[/colleft]'}
  {name: L.colright, className: 'mColright', openWith: '[colright]', closeWith: '[/colright]'}
]},

В файл plugins/markitup/lang/ru.lang.js добавим новые языковые строки:

colleft: 'Обтекание справа',
colright: 'Обтекание слева'

Теперь добавим иконки оформления для наших новых кнопок. Сделать это можно в файле plugins/markitup/style.css. Просто добавим в него (для примера) строки:

.markItUp .mColleft a	{ background-image: url(images/text_horizontalrule.png); }
.markItUp .mColright a	{ background-image: url(images/text_horizontalrule.png); }

Проверим работу наших кнопок. При клике в окно редактирования должен вставляться контейнер

[colleft][/colleft]

или

[colright][/colright]

Теперь нам остается только научить систему новым BBCode'ам. Заходим в раздел Модули / BBCodes панели администрирования и создаем в нем новые коды:

 

Заинтересовались? Звоните нам по телефонам +375 (29) 774-35-89 и +375 (44) 774-35-89 в Минске. Мы будем рады помочь Вам в реализации Вашего проекта.

К посту «Cotonti: добавляем новую кнопку и BBCode в редактор MarkItUp!» комментариев пока нет
Добавление комментариев доступно только зарегистрированным пользователям