Установка CKEditor и KCFinder в Yii2

Установка визуально редактора CKEditor довольно не сложная. Наиболее простой способ это использовать менеджер зависимостей Composer.

Будем считать, что доступ по SSH есть и Composer установлен на сервере. А так же основные команды работы с командной строкой Вы знаете. Если же нет, то можно прочитать об этом ниже:

 

Итак приступим.

1. Установка CKEditor.

Первым делом необходимо скачать сам редактор CKEditor. Порядок установки описан автором тут, там же лежат сами файлы пакета. Открываем файл composer.json и секцию require добавляем зависимость:

"2amigos/yii2-ckeditor-widget": "~1.0@dev"

и запускаем обновление composer:

composer.phar update

Ждем пока скачаются все файлы.

Другой способ позволяет сразу скачать пакет, без обновления всех остальных пакетов:

composer.phar require 2amigos/yii2-ckeditor-widget:~1.0

пишем в командной строке и ждем установки.

 

2. Подключение и использование CKEditor

Библиотека содержит два виджета: классический CKEditor для использования с моделью и CKEditorInline для использования без модели.

Первым делом подключаем один из редакторов:

<?php use dosamigos\ckeditor\CKEditor; ?>

или

<?php use dosamigos\ckeditor\CKEditorInline; ?>

Для использования с моделью в форме пишем:

<?= $form->field($model, 'body')->widget(CKEditor::className(), [
        'options' => ['rows' => 6],
        'preset' => 'basic'
]) ?>

Для использования без модели:

<?php CKEditorInline::begin(['preset' => 'basic']);?>
    Сюда можно вставить элемент формы (textarea,input и т.д.),
    либо простой текст.
<?php CKEditorInline::end();?>

Получаем что то вроде этого:

 

У редактора есть несколько preset-ов (предустановленные элементы панели управления):

  • basic - минимальный набор элементов (ничего лишнего, только основное, подходит для большинства)
  • full - полный набор
  • standart - стандартный набор элементов

 

3. Установка и использование KCFinder

На сегодня редактор без возможности вставки изображений с сервера - не редактор. Для этого был написан замечательный плагин KCFinder, который легко интегрируется в CKEditor и к тому же является бесплатным.

Здесь все тоже довольно просто. Для начала в Composer.json добавляем зависимость:

"iutbay/yii2-kcfinder" : "*"

Единственное помимо этого нужно заменить 

"minimum-stability":"stable

на

"minimum-stability": "dev",
"prefer-stable": true,

и обновляем Composer:

composer.phar update

либо выполнить команду:

composer.phar require "iutbay/yii2-kcfinder" "*"

Использовать данный виджет так же довольно просто. Для использования с моделью:

<?php use iutbay\yii2kcfinder\KCFinderInputWidget; ?>

<?= KCFinderInputWidget::widget([
    'name' => 'image',
]);?>

Без модели:

<?php use iutbay\yii2kcfinder\KCFinderInputWidget; ?>
<?= $form->field($model, 'images')->widget(KCFinderInputWidget::className(), [
    'multiple' => true,
]); ?>

4. Интеграция CKEditor и KCFinder

Для использования KCFinder и вставки их в текстовый редактор прямо с сервера, сперва нужно рассказать CKEditor-у о нашем обозревателе файлов. Для этого открываем файл vendor/2amigos/yii2-ckeditor-widget/src/CKEditor.php и добавляем следующий код (выделен жирным):

namespace dosamigos\ckeditor;

use yii\helpers\Html;
use yii\helpers\Json;
use yii\widgets\InputWidget;

use yii\helpers\ArrayHelper;
use Yii;
use iutbay\yii2kcfinder\KCFinderAsset;

class CKEditor extends InputWidget
{

use CKEditorTrait;

public $enableKCFinder = true;

.....

/**

* Registers CKEditor plugin
* @codeCoverageIgnore
*/

protected function registerPlugin()

{

if ($this->enableKCFinder)  $this->registerKCFinder();

$js = [];

...

}

protected function registerKCFinder()
{

$_SESSION['KCFINDER'] = [

'disabled' => false,
'uploadURL'=>'/upload',
'uploadDir'=>Yii::getAlias('@frontend/web/upload')

];

        $register = KCFinderAsset::register($this->view);
        $kcfinderUrl = $register->baseUrl;

        $browseOptions = [
            'filebrowserBrowseUrl' => $kcfinderUrl . '/browse.php?opener=ckeditor&type=files',
            'filebrowserUploadUrl' => $kcfinderUrl . '/upload.php?opener=ckeditor&type=files',
            'filebrowserImageBrowseUrl' => $kcfinderUrl . '/browse.php?opener=ckeditor&type=images',
            'filebrowserImageUploadUrl' => $kcfinderUrl . '/upload.php?opener=ckeditor&type=images',
        ];

        $this->clientOptions = ArrayHelper::merge($browseOptions, $this->clientOptions);
}

}

Главными настройками здесь являются параметры заданные в сессии $_SESSION['KCFINDER']:

  • disabled - отключенный (устанавливаем в Нет)
  • uploadURL - ссылка на изображение (будет подставляться в src изображения)
  • uploadDir - путь для загрузки изображений (ну тут все понятно)

Теперь по нажатию на кнопку вставки изображения в форме работы с картинкми появились два элемента "Выбор на сервере" и "Загрузить".