CKEditor

\Kotchasan\CKEditor สำหรับ WYSIWYG rich text editor

การใช้งาน

use Kotchasan\CKEditor;
use Kotchasan\Html;

// สร้าง form
$form = Html::create('form');

// เพิ่ม CKEditor
$form->add('ckeditor', [
    'id' => 'content',
    'name' => 'content',
    'label' => 'เนื้อหา',
    'value' => $existingContent,
    'upload' => true  // เปิดใช้งานการอัพโหลดรูปภาพ
]);

echo $form->render();

Attributes

Methods

enabledUpload()

ตรวจสอบว่าการอัพโหลดเปิดใช้งานอยู่หรือไม่

if (CKEditor::enabledUpload()) {
    // ผู้ใช้สามารถอัพโหลดได้
}

• Admin: สามารถอัพโหลดได้เสมอ
• Member: ต้องมี session ที่เหมาะสม
• Guest: ไม่สามารถอัพโหลดได้

render()

Render CKEditor เป็น HTML

$html = $editor->render();

toTextarea()

แปลง special characters สำหรับใช้ใน textarea

$text = $editor->toTextarea($content);

toDiv()

แปลง {} เป็น HTML entities สำหรับใช้ใน div

$text = $editor->toDiv($content);

ตัวอย่างการใช้งาน

Basic Editor

$form = Html::create('form', [
    'action' => 'save.php',
    'method' => 'POST'
]);

$form->add('ckeditor', [
    'id' => 'article_content',
    'name' => 'content',
    'label' => 'เนื้อหาบทความ',
    'value' => ''
]);

$form->add('button', [
    'type' => 'submit',
    'value' => 'บันทึก'
]);

echo $form->render();

Editor พร้อมอัพโหลดรูปภาพ

$form = Html::create('form');

$form->add('ckeditor', [
    'id' => 'article',
    'name' => 'article',
    'label' => 'บทความ',
    'value' => $article->content,
    'upload' => true,
    'height' => 400,
    'toolbar' => 'Full'
]);

echo $form->render();

ใช้กับ CKFinder

หากติดตั้ง CKFinder ที่ ROOT_PATH/ckfinder จะใช้งานได้อัตโนมัติ:

// ต้องมีโฟลเดอร์ ckfinder
// ROOT_PATH/ckfinder/ckfinder.html

$form->add('ckeditor', [
    'id' => 'content',
    'upload' => true  // จะใช้ CKFinder อัตโนมัติ
]);

Configuration Options

CKEditor รองรับ options มาตรฐานของ CKEditor:

$form->add('ckeditor', [
    'id' => 'editor',
    'height' => 300,
    'width' => '100%',
    'toolbar' => 'Basic',
    'language' => 'th',
    'enterMode' => 2,  // CKEDITOR.ENTER_BR
    'shiftEnterMode' => 1  // CKEDITOR.ENTER_P
]);

JavaScript Output

CKEditor จะสร้าง JavaScript initialization อัตโนมัติ:

CKEDITOR.replace("content", {
    height:300,
    width:"100%",
    toolbar:"Basic"
});

การจัดการข้อมูล

บันทึกข้อมูล

// รับข้อมูลจาก form
$content = $_POST['content'];

// บันทึกลงฐานข้อมูล
$db->insert('articles')->values([
    'content' => $content
])->execute();

แสดงข้อมูล

// ดึงข้อมูลจากฐานข้อมูล
$article = $db->select('*')->from('articles')->first();

// แสดงผล (ข้อมูลเป็น HTML อยู่แล้ว)
echo $article->content;

Security

[!WARNING]
เนื้อหาจาก CKEditor เป็น HTML ควรตรวจสอบก่อนบันทึก

// ใช้ HTML Purifier หรือ filter อื่นๆ
$content = strip_tags($content, '<p><a><strong><em><ul><li><ol>');

คลาสที่เกี่ยวข้อง

• Form - Form builder
• Html - HTML generation
• Login - Authentication