Встраивание карт в заметки (топики).

Введение.

Кратко, без лишних слов, чтобы не забыть в будущем.

Сервис карт можно использовать в принципе любой, но мне больше по душе основанный на Leaflet MapBBCode. По умолчанию в Альто (как и в Livestreet) в MarkItUp используется Html разметка. Не буду ломать лишнего и добавлю свой тег который в будущем буду расширять списком поддерживаемых типов встраивания.

Порядок действий.

1. Либо пользуемся http://share.mapbbcode.org, либо устанавливаем свою копию.

2. Добавляем кнопку в MarkItUp.
templates/framework/js/settings.js

        this.getMarkitup = function() {
                return {
                        onShiftEnter:   {keepDefault:false, replaceWith:'<br />\n'},
                        onCtrlEnter:    {keepDefault:false, openWith:'\n<p>', closeWith:'</p>'},
                        onTab:                  {keepDefault:false, replaceWith:'    '},
                        markupSet:  [
------------
                                {name: ls.lang.get('panel_media'), className:'editor-media', replaceWith:'<media>[!['+ls.lang.get('panel_media_promt')+':!:http://]!]</media>' }
                        ]
                }
        };

engine/lib/external/jquery/markitup/sets/default/style.css
Добавляем класс для кнопки

engine/lib/external/jquery/markitup/sets/default/images
Размещаем иконку кнопки

engine/modules/text/Text.class.php
Либо создаём свою функцию, либо идём по минимальному пути и редактируем функцию VideoParser($sText) по аналогии:

                $sText = preg_replace(
            '/<media>(http:\/\/maps\.4x4krasnodar\.ru\/[a-zA-Z0-9_\-]+.+)<\/media>/Ui',
            ' <div style="margin: 1px; display: inline-block; vertical-align: bottom; width: 640px; height: 480px;" data-url="$1" class="bbmedia"><iframe width="640" height="480" frameborder="0" allowfullscreen="" mozallowfullscreen="" webkitallowfullscreen="" src="$1?format=iframe&amp;direct" style="vertical-align: bottom; width: 640px; height: 480px;"></iframe></div>',
            $sText);

config/jevix.php
Добавляем новый тег в массивы cfgAllowTags, cfgSetTagPreformatted, cfgSetTagNoTypography.

В итоге кнопка вставляет в заметку аккуратное

<media>http://...</media>

, а в заметке отображается как-то вот так.