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

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

Сервис карт можно использовать в принципе любой, но мне больше по душе основанный на 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>
, а в заметке отображается как-то вот так.

Похожие статьи

  • Наводим порядок в редакторе TinyMCE 4
    Простите, но я зае, намучался с этим встроенным TinyMCE 4.0. Поэтому разрешите выложить решения проблем, которые мучали лично меня, возможно и кого-то ещё. Какие были проблемы: 1) При вставке текста из другого...
  • Как задать высоту в редакторе?
    Привет всем! Подскажите, пожалуйста. Немного смущает тот факт, что редактор tinymce при написании текста уезжает вниз, то есть нет никаких полос прокрутки и при необходимости вставить изображения чтобы дотянуться до ...
  • Не работает кнопка «изменить фотографию» в настройках пользователя
    Тема «Start-Kit», кнопка «изменить фотографию» та которая «online», на других темах идущих в поставке все нормально. Версия движка последняя.
  • Проблемы с редактором Tinymce
    — При создании топиков в Tinymce, на версии 1.1.29, не работает выравнивание текста после сохранения. — Если задать цвет текста, после сохранения, цвет не задается. <p style="color: #cc0000; text-align:...

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

Автор статьи запретил добавлять комментарии