การติดตั้งและการตั้งค่า CKEditor และ FileBrowser ใน Yii Framework 2

ในบทเรียนรู้นี้ เรามาทำการติดตั้ง package CKEditor สำหรับเป็นตัวจัดการข้อความต่างๆ เช่นการกำหนดค่าตัวหนา ตัวเอง ตัวขีดเส้นใต้ เป็นต้น และนอกจากนั้นจะได้เรียนรู้การติดตั้งตัว File Browser ที่ทำงานร่วมกันกับ CKEditor ได้อย่างลงตัว ไปเริ่มกันเลย

ติดตั้ง Package

สำหรับ package ที่เกี่ยวข้องสามารถติดตั้งได้โดยเพิ่มรายการ package ในส่วน require ในไฟล์ composer.json

"2amigos/yii2-ckeditor-widget": "*",
"nick-denry/yii2-ckeditor-roxyfileman": "^0.1.0",

จากนั้นสั่ง composer update

การตั้งค่า FileManager

การตั้งค่า โดยาการเพิ่ม modules ใน application เรา โดยเปิด file config เช่น frontend/config/main.php แล้วกำหนดในส่วน modules ดังนี้

'modules' => [
//...
'ckeditorRoxyFileman' => [
            'class' => 'nickdenry\ckeditorRoxyFileman\Module',
            'uploadFolder' => '@frontend/web/uploads/images',
            'uploadUrl' => '/uploads/images',
            'allowExtension' => 'jpeg jpg png gif doc docx xls xlsx ppt pptx pdf'
        ],
//...
],

ใส่ CKEditor ในฟอร์ม

การใส่ CKEditor ในฟอร์มสามารถเรียกใช้งานได้ทันทีโดยระบุลักษณะดังนี้

<?php
use nickdenry\ckeditorRoxyFileman\RoxyFileManager;
use dosamigos\ckeditor\CKEditor;
?>

<?= $form->field($model, 'content')->widget(CKEditor::className(), [
        'preset' => 'standard',
        'clientOptions' => RoxyFileManager::attach([
            'extraPlugins'=>  'codesnippet,colorbutton,iframe,dialogadvtab',
        ]),
    ]) ?>

กำหนดให้ย่อรูปอัตโนมัติ

เราสามารถกำหนดให้ย่อรูปอัตโนมัติหลังจากที่ upload รูปแล้ว ให้สร้าง helper Class ตัวอย่างนี้จะสร้าง Class สำหรับย่อรูป โดยเก็บใน frontend/helpers/ThumbnailHelper.php โดยเขียนโปรแกรมในการย่อดังนี้

<?php
/**
 * Created by HanumanIT Co.,Ltd.
 * User: kongoon
 * Date: 2019-07-09
 * Time: 23:43
 */

namespace frontend\helpers;


use Imagine\Image\Box;
use Yii;
use yii\imagine\Image;

class ThumbnailHelper
{
    public static function createThumbnail($event) {
        //Yii::info($event->fileName); // $event->fileName contains filesystem full path to file
        // Some thumbnail operations
        if(isset($event->fileName)) {
            Image::getImagine()->open($event->fileName)->thumbnail(new Box(800, 800))->save($event->fileName, ['quality' => 100]);
        }
    }
}

จากนั้นตั้งค่า Event Call หลังจาก upload รูป โดยเปิดไฟล์ frontend/config/main.php จากนั้นเพิ่มคำสั่งด้านล่าง 'params' => $params ดังนี้

'params' => $params,
    'on ckeditorRoxyFileman.fileUploaded' => [
        'frontend\helpers\ThumbnailHelper', 'createThumbnail'
    ],

ตัวอย่างเมื่อกด Image จากนั้นกด Browse Server

Upload ไป Folder user_id

ขั้นตอนสุดท้ายเราจะให้ user upload ไฟล์ต่างๆ ไปที่ folder ของตัวเอง โดยแต่ละคนจะไม่สามารถ browse ไป folder ของคนอื่นได้ โดยการตั้งค่าเพิ่มเติม ให้เปิดไฟล์ frontend/config/main.php ปรับแต่งส่วน modules ที่ทำไว้ในขั้นตอนก่อนหน้านี้

'ckeditorRoxyFileman' => [
            'class' => 'frontend\modules\fileman\Module',
            'allowExtension' => 'jpeg jpg png gif doc docx xls xlsx ppt pptx pdf'
        ],

จากน้ันสร้าง module fileman โดยสร้าง folder frontend/modules/fileman และสร้างไฟล์ Module.php เพื่อทำการ override class ลักษณะดังนี้

<?php
/**
 * Created by HanumanIT Co.,Ltd.
 * User: kongoon
 * Date: 2019-07-09
 * Time: 23:50
 */

namespace frontend\modules\fileman;


use nickdenry\ckeditorRoxyFileman\Module as MyBaseModule;
use Yii;

class Module extends MyBaseModule
{
    public $controllerMap = [
        'default' => [
            'class' => 'nickdenry\ckeditorRoxyFileman\controllers\DefaultController',
            'viewPath' => '@vendor/nick-denry/yii2-ckeditor-roxyfileman/src/views/default'
        ],
        'management' => [
            'class' => 'nickdenry\ckeditorRoxyFileman\controllers\ManagementController',
            'viewPath' => '@vendor/nick-denry/yii2-ckeditor-roxyfilename/src/views/management'
        ]
    ];
    /**
     * Initializes the module, set uploadFolder dynamically
     */
    public function init()
    {
        $this->layoutPath = '@vendor/nick-denry/yii2-ckeditor-roxyfileman/src/views/layouts';
        $this->uploadFolder = '@frontend/web/uploads/files/'.Yii::$app->user->getId();
        $this->uploadUrl = 'https://yourdomain.com/uploads/files/'.Yii::$app->user->getId();
        parent::init();
    }
}
?>

การติดตั้งและการตั้งค่า CKEditor และ FileBrowser ใน Yii Framework 2