[Yii] Mengelola isi posting/berita dengan EditMe + KCFinder

Website tidak bisa lepas dari content berita/postingan untuk memberikan informasi pada para pengunjung website. Kita bisa saja menggunakan “textarea” untuk memasukan text berita yang sangat panjang dan menggunakan “filefield” untuk pengelolaan gambar yang ditampilkan. Tapi jika kita menghadapi kasus posting berita dengan format teks yang italic, underline, paragraf dengan justify dsb tentu kita akan kesulitan jika menggunakan “textarea”. Oleh karena itu kita akan membuat suatu editor dengan extension yang nanti penampakannya akan seperti dibawah ini,

Disini kita akan menggunakan 2 extension yaitu :

1. EditMe => Download 
2. KCFinder => Download

editMe ini akan digunakan sebagai editor text, sementara KCFinder sebagai pengelolaan upload file (image/video/file apapun) dalam postingan berita yang akan ditampilkan.

Langsung saja langkah-langkahnya pertama masukan editMe ke folder protectd/extension. Kemudian masukan KCFinder di folder root dari project anda seperti di bawah ini

Langkah selanjutnya kita masuk ke VIEW dimana kita akan meletakan text editor ini, lalu rubah “textboxField” atau inputan apapun yang digunakan menjadi seperti

<div class="row">

        <?php echo $form->textFieldRow($model,'judul',array('size'=>60,'maxlength'=>255)); ?>

        <?php echo $form->error($model,'judul'); ?>

    </div>

        <p class="note"><h3>Isi Berita</h3></p>

    <div class="row">

        <?php $this->widget('ext.editMe.widgets.ExtEditMe', 

                array(

                    'model'=>$model, 

                    'attribute'=>'isi',

                                        'filebrowserImageBrowseUrl' => Yii::app()->baseUrl.'/kcfinder/browse.php?type=files',

                                        'filebrowserImageUploadUrl'=>Yii::app()->baseUrl.'/kcfinder/upload.php?type=files',

                                )); ?>

        <?php echo $form->error($model,'isi'); ?>

    </div>

<br/>

<br/>

        <div class="row">

        <?php echo $form->dropDownListRow($tag,'tag',array('Berita'=>'Berita', 'Artikel'=>'Artikel','Project'=>'Project','Lainnya'=>'Lainnya'),

                        array('class'=>'chosen-select','multiple'=>true, 'style'=>'width:350px', 'tabindex'=>'4')); ?>

        <?php echo $form->error($tag,'tag'); ?>

    </div> 

Simple bukan?

filebrowseImageBrowseUrl ini akan digunakan sebagai pencari file image, jika kita ingin menggunakan kcfinder untuk file lain selain “image” maka kita tinggal memilih 

'filebrowserBrowseUrl'=>Yii::app()->baseUrl.'/kcfinder/browse.php?type=files',

'filebrowserImageBrowseUrl'=>Yii::app()->baseUrl. '/kcfinder/browse.php?type=images',

'filebrowserFlashBrowseUrl'=>Yii::app()->baseUrl.'/kcfinder/browse.php?type=flash'

dan filebrowserImageUploadUrl ini merupakan lokasi file php yang digunakan untuk mengeksekusi upload file yang diinginkan.

untuk syntax actionCreate tidak ada perubahan, sementara table yang digunakan yaitu  :

Nama	Jenis
Id	Int Auto Increment
Judul	Varchar(50)
Isi	Text
Tag	Varchar(50)

sementara untuk contoh penggunaan jika kita ingin menambahkan gambar pada postingan, kita pilih icon "image", lalu muncul gambar dibawah ini

kita pilih gambar yang ingin di masukan ke berita, kemudian "send it to server", maka akan muncul gambar dibawah ini

gambar diatas menunjukan properties dari gambar yang ingin ditampilakn dari posisi hingga ukuran gambar agar sesuai dengan harapan, jika sudah sesuai pilih ok dan akan muncul gambar seperti dibawah ini

selamat mencoba.