Используем CKeditor в Yii2

CKeditor отличный WYSIWYG редактор. В этой статье я покажу как можно использовать его в своем Yii2 проекте.

Автор . Дата: 06.03.2017

CKeditor отличный WYSIWYG редактор. В этой статье я покажу как можно использовать его в своем Yii2 проекте.

Подключить его можно различными способами. Например скачать и разместить в папке web а затем подключить через AssetManager либо используя функцию registerJS, либо установив его через npm или bower и так же подключить вручную. Самым правильным способом будет подключить его используя yii2 расширение. Его можно установить используя команду:

composer require 2amigos/yii2-ckeditor-widget

либо добавив в секцию require вашего файла composer.json:

"2amigos/yii2-ckeditor-widget" : "2.0"

Это расширение предоставляет виджет, через который можно подключить CKEditor к вашей форме:

use dosamigos\ckeditor\CKEditor;


echo $form->field($model, 'text')->widget(CKEditor::className(), [
        'options' => ['rows' => 6],
        'preset' => 'basic'
    ]);

Во второй аргумент вызова виджета вы можете передать массив с настройками текущего экземпляра редактора, например:

use dosamigos\ckeditor\CKEditor;


echo $form->field($model, 'text')->widget(CKEditor::className(), ['preset' => 'custom',   'clientOptions' => [
    'toolbarGroups' => [
        ['name' => 'undo'],
        ['name' => 'basicstyles', 'groups' => ['basicstyles', 'cleanup']],
        ['name' => 'colors'],
        ['name' => 'links', 'groups' => ['links', 'insert']],
        ['name' => 'others', 'groups' => ['others', 'about']],
    ]
]]);

Либо вы можете глобально настроить все экземпляры редакторов через контейнер внедрения зависимостей:

$config = [
    'container' => [
        'definitions' => [
            'dosamigos\ckeditor\CKEditor' => [
                'preset' => 'custom',
                'clientOptions' => [
                    'extraPlugins' => 'justify,font,codesnippet,youtube',
                    'language' => 'ru',
                    'toolbarGroups' => [
                        [
                            'name' => 'clipboard',
                            'groups' => ['clipboard', 'undo'],
                        ],
                        [
                            'name' => 'editing',
                            'groups' => ['find', 'selection', 'spellchecker'],
                        ],
                        [
                            'name' => 'basicstyles',
                            'groups' => ['basicstyles', 'cleanup'],
                        ],
                        [
                            'name' => 'insert',
                        ],
                        [
                            'name' => 'font',
                        ],
                        [
                            'name' => 'links',
                        ],
                        [
                            'name' => 'document',
                            'groups' => ['mode', 'document', 'doctools'],
                        ],
                        '/',
                        [
                            'name' => 'paragraph',
                            'groups' => ['list', 'indent', 'blocks', 'align', 'bidi'],
                        ],
                        [
                            'name' => 'styles',
                            'groups' => ['Styles', 'Format', 'Font', 'FontSize']
                        ]
                    ],
                    'removeDialogTabs' => 'image:advanced',
                    'removeButtons' => 'Underline,Subscript,Superscript,',
                    'filebrowserImageUploadUrl' => '/files/upload'
                ]
            ]
        ],
    ],
];

return $config;

Возможность настраивать контейнер зависимостей через конфиг появилась в Yii 2.0.10, в более старых версиях нужно использовать метод:

Yii::$app->set('dosamigos\ckeditor\CKEditor', []) 

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

В это расширение включены все стандартные плагины редактора CKEditor. Если вы хотите подключить сторонний плагин, то вам необходимо загрузить его в публично доступную папку, затем используя функцию registerJS выполните загрузку внешнего плагина, например вот так:

$this->registerJs("CKEDITOR.plugins.addExternal('pbckcode', '/pbckcode/plugin.js', '');");

И затем через конфигурацию самого редактора вы можете подключить внешний плагин. Для этого добавьте название плагина в элемент массива с ключом extraPlugins.


comments powered by HyperComments