[Yii Framework 2] Integrasi Wysiwyg CKEditor dengan ElFinder pada Yii Framework 2

Selamat siang sobat. Sudah lama tidak posting tutorial pada blog ini, akhirnya saya menyempatkan untuk kembali membuat tutorial. Tutorial kali ini memang tidak begitu penting dan bisa dibilang sangat tidak bermanfaat, tapi berhubung bingung untuk membuat apa akhirnya tetap saya lanjutkan.

Penggunaan Wysiwyg Editor pada website memang sangat penting, telebih jika website tersebut mengandung informasi/berita yang berisi tulisan dinamis dan rapi. Salah satu Wysiwyg yang terkenal dan banyak digunakan adalah CKEditor. Namun pada CKEditor tidak terintegrasi fitur untuk upload gambar, namun bisa Anda tambahkan fitur tersebut dengan beberapa plugin. Pada kesempatan ini saya membuat sedikit contoh integrasi CKEditor dengan ElFinder khusus untuk pengguna Yii Framework 2.

Sebagai catatan, pada tutorial ini menggunakan fasilitasi yang disediakan oleh Composer. Jika Anda belum memahami Composer, silahkan Anda pelajari terlebih dahulu.

Langsung saja, kali ini saya membuat contoh menggunakan template BASIC. Kemudian buat database dengan nama apa saja, namun disini saya membuat database dengan nama 'yii_ckeditor_elfinder' kemudian diisi dengaan table seperti berikut :

CREATE TABLE IF NOT EXISTS `artikel` (
  `id` int(3) NOT NULL AUTO_INCREMENT,
  `judul` varchar(200) NOT NULL,
  `isi_artikel` text NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8;

Oya pastikan Anda telah menginstall Yii Framework 2 pada workspace anda. kemudian atur database dengan yang telah Anda buat. Kemudanan generate Model dan CRUD. Jika telah selesai kemudaian instal widget berikut pada composer.

composer require --prefer-dist mihaildev/yii2-elfinder "*"
composer require --prefer-dist mihaildev/yii2-ckeditor "*"

Jika semua telah dilakukan, Sekarang anda buat folder dengan nama files pada directory "/projectyii/web/files" setelah itu buka file /config/web.php dan tambahkan beberapa baris kode seperti berikut.

$config = [
    'id' => 'basic',
    'basePath' => dirname(__DIR__),
    'bootstrap' => ['log'],
 'controllerMap' => [
        'imagebrowser' => [
            'class' => 'mihaildev\elfinder\PathController',
            'access' => ['@'],
            'root' => [
                'path' => 'files',
                'name' => 'Files'
            ],
            'watermark' => [
                'source'         => __DIR__.'/logo.png', // Path to Water mark image
                'marginRight'    => 5,          // Margin right pixel
                'marginBottom'   => 5,          // Margin bottom pixel
                'quality'        => 95,         // JPEG image save quality
                'transparency'   => 70,         // Water mark image transparency ( other than PNG )
                'targetType'     => IMG_GIF|IMG_JPG|IMG_PNG|IMG_WBMP, // Target image formats ( bit-field )
                'targetMinPixel' => 200         // Target image minimum pixel size
            ]
        ]
    ],
    'components' => [
 ...
 ]
];

Setelah itu buka file ArtikelController.php dan tambahkan hak aksses sesuai dengan kebutuhan Anda. Untuk contoh saya hanya menambahkan beberapa basis berikut.

public function behaviors()
{
    return [
        'access' => [
            'class' => \yii\filters\AccessControl::className(),
     'only' => ['create', 'delete', 'update'],
            'rules' => [
                [
                    'allow' => true,
                    'roles' => ['@'],
                ],
            ],
        ],

Kemudian kita ubah form artikel agar tampil CKEditornya. Ubah seperti berikut.

<?php

use yii\helpers\Html;
use yii\widgets\ActiveForm;
use mihaildev\ckeditor\CKEditor;
use mihaildev\elfinder\ElFinder;
/* @var $this yii\web\View */
/* @var $model app\models\Artikel */
/* @var $form yii\widgets\ActiveForm */
?>

<div class="artikel-form">

    <?php $form = ActiveForm::begin(); ?>

    <?= $form->field($model, 'judul')->textInput(['maxlength' => true]) ?>
   
    <?= $form->field($model, 'isi_artikel')->widget(CKEditor::className(), [
  'editorOptions' => ElFinder::ckeditorOptions('imagebrowser',[/* Some CKEditor Options */]), 
 ]) ?>

    <div class="form-group">
        <?= Html::submitButton($model->isNewRecord ? 'Create' : 'Update', ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>
    </div>

    <?php ActiveForm::end(); ?>

</div>

Agar hasilnya terlihat, kemudian ubah file view.php pada folder artikel seperti berikut

<?php

use yii\helpers\Html;
use yii\widgets\DetailView;

/* @var $this yii\web\View */
/* @var $model app\models\Artikel */

$this->title = $model->id;
$this->params['breadcrumbs'][] = ['label' => 'Artikels', 'url' => ['index']];
$this->params['breadcrumbs'][] = $this->title;
?>


<div class="artikel-view">

    <h1><?= Html::encode($model->judul) ?></h1>
 <hr />
 <?= $model->isi_artikel ?>

</div>

Selesai, jika berhasil, maka hasilnya seperti berikut

Download