пятница, 8 июля 2016 г.

Настройка интеграции TinyMCE и "RESPONSIVE filemanager" в Yii2 Advanced Template.

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

Для загрузки файлов и картинок подключаем отличное расширение "RESPONSIVE filemanager".

Для подключения самого редактора TinyMCE я использую расширение "2amigos/yii2-tinymce-widget".

1. Скачиваем расширение http://www.responsivefilemanager.com/, распаковываем целиком в папку, допустим "/backend/web/plugins/responsivefilemanager".

Папка "/backend/web" в моём проекте доступна по адресу "/admin/".

2. Открываем файл "/responsivefilemanager/filemanager/config/config.php".

3. Настраиваем пути.

    // Путь к загруженным файлам относительно корневого URL.
    'upload_dir' => '/uploads/',

    // Путь к папке для загрузки файлов относительно папки "/responsivefilemanager".
    'current_path' => '../../../../../frontend/web/uploads/',

    // Путь к папке для загрузки миниатюр относительно папки "/responsivefilemanager".
    'thumbs_base_path' => '../../../../../frontend/web/uploads_thumbs/',

4. Настраиваем максимальный размер загружаемых файлов. Я ставлю 50 мегабайт. Для большинства файлов этого хватает.

    'MaxSizeUpload' => 50,

5. Настраиваем язык интерфейса.

    'default_language' => "ru",

6. Создаём папки для загрузки:
    /frontend/web/uploads/
    /frontend/web/uploads_thumbs/

7. Прописываем необходимые настройки TinyMCE. Я делаю это в файле "/backend/config/bootstrap.php", чтобы настройки применялись глобально во всех формах.

// Конфигурация по умолчанию для виджета TinyMCE.
Yii::$container->set('dosamigos\tinymce\TinyMce', [
    'language' => 'ru',
    'options' => ['rows' => 20],
    'clientOptions' => [
        'plugins' => [
            "advlist autolink lists link charmap hr preview pagebreak",
            "searchreplace wordcount textcolor visualblocks visualchars code fullscreen nonbreaking",
            "save insertdatetime media table contextmenu template paste image responsivefilemanager filemanager",
        ],
        'toolbar' => "undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | responsivefilemanager link image media",
        'external_filemanager_path' => '/admin/plugins/responsivefilemanager/filemanager/',
        'filemanager_title' => 'Responsive Filemanager',
        'external_plugins' => [
            // Кнопка загрузки файла в диалоге вставки изображения.
            'filemanager' => '/admin/plugins/responsivefilemanager/filemanager/plugin.min.js',
            // Кнопка загрузки файла в тулбаре.
            'responsivefilemanager' => '/admin/plugins/responsivefilemanager/tinymce/plugins/responsivefilemanager/plugin.min.js',
        ],
    ]
]);

5 комментариев:

  1. Спасибо! Но проблемы начнутся когда у вас frontend и backend на разных доменах

    ОтветитьУдалить
    Ответы
    1. Пока что с таким не сталкивался, но уверен, что всё это решаемо.

      Удалить
  2. Как поменять сортировку по умолчанию?

    ОтветитьУдалить
    Ответы
    1. Предлагаю вам разобраться с этим самостоятельно.

      Удалить
  3. Со сменой версии TinyMCE на 5.х RESPONSIVE filemanager перестал работать. Как можно откатить версию TinyMCE до 4.х (4.9.4)

    ОтветитьУдалить