Кнопки в редакторе сообщений

Этот материал научит вас создавать новые кнопки в редакторе сообщений SMF.

Пример использования хуков integrate_bbc_codes и integrate_bbc_buttons.

Возьмем HTML5-вариант плеера Uppod. Современные браузеры уже поддерживают HTML5, поэтому проблем возникнуть не должно.

Итак, создадим пару тегов — video и audio. И сделать для вставки этих тегов пару кнопок в редакторе сообщений.

Используемые функции опишем в файле Subs-MyMod2.php (см. предыдущую лекцию по использованию хуков) и реализуем подключение при установке мода (см. файл hooks.php в файле примера):

$hooks = array(
    'integrate_pre_include' => '$sourcedir/Subs-MyMod2.php',
    'integrate_bbc_codes' => 'mymod2_bbc_codes',
    'integrate_bbc_buttons' => 'mymod2_bbc_buttons',
    'integrate_load_theme' => 'mymod2_load_theme'
);

if (!empty($context['uninstalling']))
    $call = 'remove_integration_function';
else
    $call = 'add_integration_function';

foreach ($hooks as $hook => $function)
    $call($hook, $function);

Обработка тегов

Теги и правила их обработки в SMF прописаны в Subs.php. Изучаем и расписываем по аналогии:

$codes[] = array(
    'tag' => 'video',
    'type' => 'unparsed_content',
    'content' => '<div class="player" id="videoplayer"></div><script type="text/javascript">this.player = new Uppod({m:"video",uid:"videoplayer",file:"$1",nohtml5:"' . $txt['mymod2_nohtml5'] . '"});</script>',
    'block_level' => true
);

Это для вставки видео. А вот для аудио:

$codes[] = array(
    'tag' => 'audio',
    'type' => 'unparsed_content',
    'content' => '<div class="player" id="audioplayer"></div><script type="text/javascript">this.player = new Uppod({m:"audio",uid:"audioplayer",file:"$1",nohtml5:"' . $txt['mymod2_nohtml5'] . '"});</script>',
    'block_level' => true
);

Разница минимальна. Содержимое элемента content берем со страницы описания плеера. Только вместо ссылки на файл используем переменную $1 (то, что между тегами).

Вставляем это в функцию mymod2_bbc_codes (она подключается с помощью хука), дописываем некоторые мелочи и получаем:

function mymod2_bbc_codes(&$codes)
{
    global $txt;

    loadLanguage('MyMod2');

    // Video
    $codes[] = array(
        'tag' => 'video',
        'type' => 'unparsed_content',
        'content' => '<div class="player" id="videoplayer"></div><script type="text/javascript">this.player = new Uppod({m:"video",uid:"videoplayer",file:"$1",nohtml5:"' . $txt['mymod2_nohtml5'] . '"});</script>',
        'block_level' => true
    );

    // Audio
    $codes[] = array(
        'tag' => 'audio',
        'type' => 'unparsed_content',
        'content' => '<div class="player" id="audioplayer"></div><script type="text/javascript">this.player = new Uppod({m:"audio",uid:"audioplayer",file:"$1",nohtml5:"' . $txt['mymod2_nohtml5'] . '"});</script>',
        'block_level' => true
    );

}

В переменной $txt[’mymod2_nohtml5′] хранится предупреждение для пользователей устаревших браузеров (как и раньше, текстовые переменные сохраняем в отдельном файле и подключаем через функцию loadLanguage).

Теперь теги audio и video обрабатываются. Но для удобства пользователей не хватает вставки этих тегов через редактор сообщений.

Редактор сообщений и ББ-теги

С помощью хука integrate_bbc_buttons подключаем функцию mymod2_bbc_buttons, в которой добавляем новые элементы в массив кнопок ($buttons):

function mymod2_bbc_buttons(&$buttons)
{
    global $txt;

    loadLanguage('MyMod2');

    // Video button
    $buttons[count($buttons) - 1][] = array(
        'image' => 'video',
        'code' => 'video',
        'before' => '[video]',
        'after' => '[/video]',
        'description' => $txt['mymod2_video'],
    );
    // Audio button
    $buttons[count($buttons) - 1][] = array(
        'image' => 'audio',
        'code' => 'audio',
        'before' => '[audio]',
        'after' => '[/audio]',
        'description' => $txt['mymod2_audio'],
    );
}

В этом массиве каждая кнопка хранится в виде следующих элементов:

  • image — название gif-изображения (без расширения) кнопки, которое хранится в директории bbc (внутри папки images)
  • code — тег, для вставки которого предназначена эта кнопка
  • before — открывающий тег, вставляемый в сообщение при нажатии на кнопку
  • after — закрывающий тег, вставляемый в сообщение при нажатии на кнопку
  • description — всплывающая подсказка, появляющаяся при наведении указателя мышки

Картинок сегодня нет.

Учебный пример