Конструктор контента Publicator

В качестве конструктора контента объектов можно использовать публикатор, позволяющий не только форматировать текст, загружать изображения, но и добавлять видео в свой контент, делать цитаты и заголовки.

Таблица для конструктора

Для работы с компонентом Publicator достаточно создать два поля типа TEXT в таблице объектов (например публикаций):

CREATE TABLE `bff_test_posts` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT, -- ID объекта (публикации)
  `content` longtext NOT NULL,                   -- контент публикации
  `content_search` longtext NOT NULL,            -- поле поиска по текстовой составляющей контента
  -- другие поля
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

Настройки и инициализация компонента конструктора

Контент компонента Publicator по умолчанию мультиязычен, также можно задавать разрешенные типы контентных блоков и другие настройки компонента. Рассмотрим пример таких настроек:

/**
 * Настройки конструктора контента
 * @return array
 */
public function publicatorSettings()
{
    $aSettings = array(
        'title' => false,
        'langs' => $this->locale->getLanguages(),            # список используемых языков
        'images_path' => \bff::path('posts', 'images'),      # путь к папке с изображениями публикатора, вместо posts название модуля(дополнения) для работы с объектами
        'images_path_tmp' => \bff::path('tmp', 'images'),    # путь к папке с временным хранилищем изображений
        'images_url' => \bff::url('posts', 'images'),
        'images_url_tmp' => \bff::url('tmp', 'images'),
        # gallery params                                     # настройки галереи
        'gallery_sz_view' => array(
            'width' => 750,
            'height' => false,
            'vertical' => array('width' => false, 'height' => 640),
            'quality' => 95,
            'sharp' => array()
        ), 
        # video params                                       # настройки видео
        'video_width'  => 330,
        'video_height' => 240,
    );
    
    return $aSettings;
}

Обязательно необходимо создать папку для хранения изображений, а затем указать путь к ней. В настройках указываем путь bff::path(module_name, folder_title), где будут храниться изображения, и url для их получения bff::url(module_name, folder_title). Также задаем характеристики блоков, например ширину загружаемых изображений галереи и блока видео.

Инициализируем компонент Publicator $publicatorComponent задав настройки конструктора.

/**
 * Инициализируем компонент \bff\db\Publicator
 * @return \bff\db\Publicator компонент
 */
public function initPublicator()
{
    $aSettings = $this->publicatorSettings();
    # Подключаем конструктор контента
    $publicatorComponent = $this->attachComponent('publicator', new \bff\db\Publicator($this->module_name, $aSettings));
    return $publicatorComponent;
}

Использование объекта в админ-панели

Развернуто о порядке применения данного компонента в формах вы найдете в данной статье

Вывод контента конструктора

После добавления контента, есть необходимость его вывода. Рассмотрим пример вывода контента на страницу публикации.

В методе, отвечающим за отрисовку страницы публикации на фронтенде, подготавливаем данные конструктора из поля 'content' таблицы БД, сохраненные в админ панели. Выполняет подготовку данных метод view(data, record_id, template, template_dir) компонента Publicator, параметрами являются:

• данные публикатора, сохраненные в поле content
• ID объекта (публикации)
• шаблон отрисовки
• путь к директории шаблона

$publicatorComponent = $this->initPublicator();
$content = $publicatorComponent->view($item['content'], $item['id'], 'view.content', $this->module_dir_tpl);

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

 <?php
 
 use \bff\db\Publicator;
 
 if( ! empty($aData['b']))
 {
     $galleryIndex = 0;
     foreach($aData['b'] as $v)
     {
         switch($v['type'])
         {
             case Publicator::blockTypeSubtitle: # блок "Подзаголовок" h2, h3 ...
             {
                 $size = 'h'.$v['size'];
                 ?><div class="block block-subtitle"><<?= $size ?>><?= $v['text'][LNG]; ?></<?= $size ?>></div><?
             } break;
             case Publicator::blockTypeText: # блок "Текст"
             {
                 ?><div class="block block-text"><?= $v['text'][LNG]; ?></div><?
             } break;
             case Publicator::blockTypePhoto: # блок "Фото"
             {
                 ?><div class="faq-help-img">
                     <img src="<?= $v['url'][Publicator::szView]; ?>" alt="<?= $v['alt'][LNG] ?>" />
                     <?= ( ! empty($v['text'][LNG]) ? '<div>'.$v['text'][LNG].'</div>' : ''); ?>
                   </div><?
             } break;
             case Publicator::blockTypeGallery: # блок "Фотогалерея"
             {
                 $galleryIndex++;
                 ?><div class="txt-gallery">
                     <div class="fotorama" id="imageGallery<?= $galleryIndex ?>" data-auto="false">
                     <? foreach($v['p'] as $gp) { ?>
                         <a href="<?= ($gp['url'][Publicator::szView]) ?>" data-thumb="<?= ($gp['url'][Publicator::szThumbnail]) ?>" data-caption="<?= $gp['alt'][LNG] ?>" alt="<?= $gp['alt'][LNG] ?>"></a>
                     <? } ?>
                     </div>
                   </div>
                   <script type="text/javascript">
                     <? js::start(); ?>
                     $(function(){
                         $('#imageGallery<?= $galleryIndex ?>').fotorama({
                           width: '100%', maxwidth: '100%', maxheight: 640,
                           allowfullscreen: false,
                           thumbmargin: 10,
                           thumbborderwidth: 1,
                           ratio: 750/640,
                           nav: 'thumbs', fit: 'contain',
                           keyboard: true,
                           loop: true, click: true, swipe: true
                         });
                     });
                     <? js::stop(); ?>
                   </script>
                 <?
             } break;
             case Publicator::blockTypeVideo: # блок "Видео"
             {
                 ?><div class="block block-video">
                     <object width="<?= $this->sett['video_width']; ?>" height="<?= $this->sett['video_height']; ?>">
                         <param name="allowfullscreen" value="true" />
                         <param name="allowscriptaccess" value="always" />
                         <param name="wmode" value="transparent" />
                         <param name="movie" value="<?= $v['video']; ?>" />
                         <embed src="<?= $v['video']; ?>" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" wmode="transparent" width="<?= $this->sett['video_width']; ?>" height="<?= $this->sett['video_height']; ?>"></embed>
                     </object>
                   </div><?
             } break;
         }
     }
 
     if( $galleryIndex > 0 ) {
         # javascript для блока "Фотогалерея"
         tpl::includeJS(array('fotorama/fotorama'), false);
         tpl::includeCSS('/js/fotorama/fotorama', false);
     }
 } 
?>