Устанавливаем редактор TinyMCE
Установим TinyMCE с помощью composer, для этого открываем консоль, переходим в папку с проекотм и вводим команду для установки:
composer require 2amigos/yii2-tinymce-widget:~1.1
После установки можем использовать, пример:
<?php //... use dosamigos\tinymce\TinyMce; //... $form = ActiveForm::begin(['options' => ['enctype' => 'multipart/form-data']]); //.. echo $form->field($model, 'text')->widget(TinyMce::className(), [ 'options' => ['rows' => 6], 'language' => 'ru', 'clientOptions' => [ 'plugins' => [ 'advlist autolink lists link charmap print hr preview pagebreak', 'searchreplace wordcount textcolor visualblocks visualchars code fullscreen nonbreaking', 'save insertdatetime media table contextmenu template paste image' ], 'toolbar' => 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image' ] ]);
Вот что получим:
По умолчанию работа с изображениями в TinyMCE выглядит так:
Для удобной загрузки файлов и картинок добавим расширение RESPONSIVE filemanager для TinyMCE:
И так, приступим.
Интеграция файлового менеджера RESPONSIVE filemanager в TinyMCE
Для начала необходимо скачать файловый менеджер для TinyMCE: http://www.responsivefilemanager.com/#download-section
Распаковываем архив RESPONSIVE filemanager в папку: /backend/web/plugins/responsivefilemanager.
Папки для хранения файлов
Создадим папки для загрузки файлов. Нам необходимо создать 2 папки, uploads - корневая папка для загрузки файлов, uploads_thumbs - для хранения миниатюр. Создадим эти две папки по пути: /frontend/web/.
Далее приступим к настройке RESPONSIVE filemanager.
Настройка путей RESPONSIVE filemanager
Откройте файл: /backend/web/plugins/responsivefilemanager/filemanager/config/config.php
Зададим путь к папке для загрузки файлов относительно корня сайта, он должен начинаться и заканчиваться слешем "/" (строка: 71):
'upload_dir' => '/uploads/',
Зададим путь к папке для загрузки файлов относительно папки responsivefilemanager, в нашем случае эта папка находится по пути /backend/web/plugins/tinymce/plugins/responsivefilemanager, так как uploads будет в корне сайта (/frontend/web/uploads/), то пишем следующий путь (строка: 81):
'current_path' => '../../../../../frontend/web/uploads/',
Зададим путь к папке для загрузки миниатюр относительно папки responsivefilemanager. По аналогии с примером выше (строка: 92):
'thumbs_base_path' => '../../../../../frontend/web/uploads_thumbs/',
Дополнительные настройки
Установим максимальный размер загружаемого файла в мегабайтах (строка: 134):
'MaxSizeUpload' => 8,
Установим язык интерфейса (строка: 142):
'default_language' => 'ru',
Подключаем RESPONSIVE filemanager к TiniyMCE
Если вы использовали настройку ЧПУ как описано здесь: .htaccess для Yii 2 advanced, то в корневом файле .htaccess после строки RewriteRule ^admin/img/(.*)$ backend/web/img/$1 [L]
добавьте строку:
RewriteRule ^admin/plugins/(.*)$ backend/web/plugins/$1 [L]
Так же, в корневой .htaccess добавим правило обращения к загруженным файла, после строки (19) RewriteRule ^images/(.*)$ frontend/web/images/$1 [L]:
RewriteRule ^uploads/(.*)$ frontend/web/uploads/$1 [L] RewriteRule ^uploads_thumbs/(.*)$ frontend/web/uploads_thumbs/$1 [L]
Теперь во view можно подключить TinyMCE с файловым менеджером:
<?php //... use dosamigos\tinymce\TinyMce; //... $form = ActiveForm::begin(['options' => ['enctype' => 'multipart/form-data']]); //.. echo $form->field($model, 'text')->widget(TinyMce::className(), [ 'options' => ['rows' => 6], 'language' => 'ru', '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', ], ] ]);
Теперь в TinyMCE появился файловый менеджер и кнопка загрузки изображения в диалоговом окне:
Файловый менеджер находится по пути "Вставить => Insert file" или с помощью сочетания горячих клавиш Ctrl + E.
Дополнительные настройки tinyMCE
Чтобы путь к картинкам сохранялся как абсолютный, а не относительный, т.е. от корня сайта добавим параметр relative_urls в массив clientOptions:
echo $form->field($model, 'text')->widget(TinyMce::className(), [ 'options' => ['rows' => 6], 'language' => 'ru', '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', ], 'relative_urls' => false, ] ]);
Чтобы уменшить код подключения TinyMCE и RESPONSIVE filemanager можно настройки подключать глобально. Для этого откройте файл /backend/config/bootstrap.php и вставьте следующий код:
<?php 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', ], 'relative_urls' => false, ] ]);
Теперь во view подключайте TinyMCE следующим образом:
<?= $form->field($model, 'text')->widget(TinyMce::className()); ?>
Вот и все, приятной работы с TinyMCE и файловым менеджером RESPONSIVE filemanager в Yii2.
Для тех кто использует Yii2 basic подключение TinyMCE и файлового менеджера для загрузки изображений и файлов используя данную инструкцию не составит особого труда.
Комментарии
Очень подробная и самое главное рабочая с первого раза статья, автору спасибо.
ОтветитьТо что надо!
Автору респект, статья мне очень пригодилась. Спасибо, все работает как надо 8)
ОтветитьОтличная статья, то что мне нужно!
ОтветитьДоброе утро.
ОтветитьСтатья хорошая, благодарю.
Но возникают проблемы с путями к изображениям в basic.
Директории uploads b uploads_thumbs разместил в web, в конфигурации обозначил пути как 'current_path' => '../../../uploads/' и 'thumbs_base_path' => '../../../uploads_thumbs/'.
В форме прописал пути в виде Yii::getAlias('@web') . '/plugins/responsivefilemanager/filemanager/', именно с псевдонимом.
Изображения загружает, но когда вставляю в текстовое поле, то путь к изображению указывается '../../uploads/file_name.jpg', а надо чтобы путь был '../uploads/file_name.jpg'
Как это исправить?
Здравствуйте, а параметр 'relative_urls' => false, не решает этой проблемы?
ОтветитьВечер добрый.
ОтветитьБлагодарю за быстрый ответ.
Данный параметр проблему не решил. Я добавил его в самой форме, в 'clientOptions', теперь убирает все уровни, адрес получается в виде '/upload/file_name.jpg'
Все верно, папка upload должна лежать в /web
ОтветитьНо при этом url менеджер и .htaccess должны быть настроены как описано здесь:
кодер.укр/записи/htaccess-для-yii2-basic
Тогда папка upload и ее содержимое будет доступно по url: site.com/upload/file.jpg
Только после 9-строки в основном .htaccess нужно добавить:
RewriteRule ^upload/(.*)$ web/upload/$1 [L]
Вроде все, должно заработать
К сожалению не помогло.
ОтветитьИзображения не показываются ни в окне выбора, ни в текстовой области, ни на странице редактирования, ни на главной.
Скажите, пожалуйста.
ОтветитьУ меня сайт лежит в подпапке, может в этом причина?
Если да, то как указать имя папки?
Возможно, т.е. сайт доступен примерно по такому адресу mysite.local/yii-basic?
ОтветитьПрошелся я еще раз по инструкции.
ОтветитьЕсли yii2 установлен в корень, то в корневой .htaccess нужно еще добавить 2 строки после
RewriteRule ^plugins/(.*)$ web/plugins/$1 [L]
:RewriteRule ^uploads/(.*)$ web/uploads/$1 [L]
RewriteRule ^uploads_thumbs/(.*)$ web/uploads_thumbs/$1 [L]
Если как у вас, в поддиректории (например: mysite.local/yii2-basic/), то корневой yii2-basic/.htaccess будет выглядеть так:
Options +FollowSymLinks
IndexIgnore */*
RewriteEngine On
RewriteCond %{REQUEST_URI} !^/(web)
RewriteRule ^assets/(.*)$ /web/assets/$1 [L]
RewriteRule ^css/(.*)$ web/css/$1 [L]
RewriteRule ^js/(.*)$ web/js/$1 [L]
RewriteRule ^images/(.*)$ web/images/$1 [L]
RewriteRule ^plugins/(.*)$ web/plugins/$1 [L]
RewriteRule ^uploads/(.*)$ web/uploads/$1 [L]
RewriteRule ^uploads_thumbs/(.*)$ web/uploads_thumbs/$1 [L]
RewriteRule (.*) /web/$1
RewriteCond %{REQUEST_URI} !^/(yii2-basic)
RewriteRule ^uploads/(.*)$ yii2-basic/web/uploads/$1 [L]
RewriteRule ^uploads_thumbs/(.*)$ yii2-basic/web/uploads_thumbs/$1 [L]
RewriteRule (.*) /yii2-basic/web/$1
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /yii2-basic/web/index.php
Пути в web/plugins/responsivefilemanager/filemanager/config/config.php должны быть такие:
'upload_dir' => '/yii2-basic/uploads/',
'current_path' => '../../../../../yii2-basic/web/uploads/',
'thumbs_base_path' => '../../../../../yii2-basic/web/uploads_thumbs/',
Файл web/.htaccess такой:
RewriteEngine On RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . index.php
Проверил, работает.
Вот рабочии примеры TinyMCE в yii2 basic (редактор TinyMCE на странице контактов):
- Yii2 basic TinyMCE + RESPONSIVE filemanager v 9.11.0:
хранилище.кодер.укр/downloads/yii2.basic.tinymce.local.zip
- Yii2 basic TinyMCE + RESPONSIVE filemanager v 9.11.0 в поддиректории (подпапке):
хранилище.кодер.укр/downloads/yii2.basic.tinymce.subdir.local.zip
Как-то так)
Да, сайт у меня расположен по адресу site.com/yii2_project.
ОтветитьСпасибо за подробно расписанный htaccess, попробую применить. Обязательно отпишусь о результатах.
Всё получилось, благодарю.
ОтветитьОтличный пример, автор молодец
ОтветитьВ новом TinyMCE 4.6 этот способ подключения у меня перестал работать.
Пришлось подключать RFM через
Я использовал инфу отсюда, вдруг кому-то поможет: https://stackoverflow.com/questions/24900018/tinymce4-file-picker-callback-return-additional-paramsОтветить
Спасибо за статью. Вопрос о CSS, каким образом пользователю при вводе статьи можно добавить файл CSS чтоб эти стили были применены к водимому контенту с последующем его сохранением?
ОтветитьПрикрепить стили к статье? Не особо понимаю зачем, но как вариант в отдельном поле ввода с типом "file"
ОтветитьБуду признателен за помощь!
Ответитьhttp://storage9.static.itmages.com/i/17/0727/h_1501153359_6415670_5cce05d8ac.png
Вроде все по инструкции, фронт и бэк на одном домене, но не работают
Может что-то с .htaccess, посмотрите на этот комент: #647 может поможет
ОтветитьДобрый день. Я установил TinyMce и интегрировал file manager но возникает проблема если я использую 2 редактора в одной форме. В первом редакторе при добавлении изображения в всплывающем окне пропадает кнопка файлменеджера.Целый день ломаю голову не могу исправить, буду очень признателен.
ОтветитьДобрый день, Сабир. Проблему с 2 редакторами в одной форме решили ? Если да, подскажите решение пожалуйста.
ОтветитьДоброго времени суток! Подскажите как можно использовать этот файловый менеджер без TinuMce. К примеру как медиатека в WP. Использую AdminLTE и хотелось бы в меню иметь кнопку которая открывала бы этот файловый менеджер.
ОтветитьКаким образом изменить сортировку по умолчанию?
ОтветитьОтличная статья. Автору лайк. В дополнение к статье: у меня не передавалась из nginx в apache2 опция HTTPS, поэтому ссылки на изображения начинались с http://. Поэтому можно дописать еще редактирование параметра: base_url в конфигурационном файле менеджера (config.php)
ОтветитьСпасибо, все еще актуально и работает
ОтветитьСомнительный компонент, лучше использовать: mihaildev/yii2-elfinder ,mihaildev/yii2-ckeditor .
ОтветитьЧувак, спасибо, ты даже не представляешь на сколько здорово ты меня выручил!
ОтветитьУ меня никаким образом не получается использовать file_picker_callback, даже кнопки загрузки изображения с компа не могу включить. Ноль реакции на него. А хотел сделать свой выбор файлов
Ответить