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

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

Сервис карт можно использовать в принципе любой, но мне больше по душе основанный на 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 при написании текста уезжает вниз, то есть нет никаких полос прокрутки и при необходимости вставить изображения чтобы дотянуться до ...
  • Размер загружаемой картинки через редактор
    Всех приветствую! Когда загружаешь картинку в редакторе, то в ссылку автоматически добавляется параметр width="100%" <img src="http://moysait....
  • Загрузка картинок в топик с обрезкой
    При загрузке изображений для фото профиля или аватара в окне работы с изображением есть функция обрезки. Но вот в загрузчике картинок при создании топиков такой возможности нет, что, на мой взгляд, не совсем удобно....

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

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