การสร้าง WYSIWYG Editors ด้วย Tailwind CSS

ในบทความนี้ เราจะมาเรียนรู้วิธีการสร้าง WYSIWYG (What You See Is What You Get) editors โดยใช้ Tailwind CSS ร่วมกับ JavaScript libraries ยอดนิยมอย่าง TinyMCE และ Quill WYSIWYG editors ช่วยให้ผู้ใช้สามารถแก้ไขเนื้อหาได้อย่างง่ายดาย โดยเห็นผลลัพธ์แบบเรียลไทม์ ทำให้การสร้างเนื้อหาบนเว็บไซต์เป็นไปได้อย่างราบรื่นและมีประสิทธิภาพ

WYSIWYG editors มักถูกนำไปใช้ในระบบจัดการเนื้อหา (CMS), บล็อก, หรือส่วนใดๆ ของเว็บไซต์ที่ต้องการให้ผู้ใช้สามารถสร้างและแก้ไขเนื้อหาได้อย่างอิสระ

สิ่งที่ต้องมี

ความรู้พื้นฐานเกี่ยวกับ HTML, CSS, และ JavaScript
ความเข้าใจพื้นฐานเกี่ยวกับ Tailwind CSS
ติดตั้ง Node.js และ npm (หรือ yarn)

ขั้นตอนการสร้าง WYSIWYG Editor

เราจะแบ่งขั้นตอนออกเป็นส่วนๆ เพื่อให้ง่ายต่อการเข้าใจและนำไปปรับใช้

1. การเลือก JavaScript Library

มี JavaScript libraries มากมายที่สามารถนำมาใช้สร้าง WYSIWYG editors ได้ ที่นิยมใช้กันมีดังนี้:

TinyMCE: เป็น library ที่มีฟีเจอร์หลากหลายและยืดหยุ่น สามารถปรับแต่งได้สูง
Quill: เป็น library ที่เน้นความเรียบง่ายและใช้งานง่าย เหมาะสำหรับโปรเจกต์ที่ต้องการ WYSIWYG editor ที่ไม่ซับซ้อน

ในบทความนี้ เราจะยกตัวอย่างการใช้งานทั้ง TinyMCE และ Quill

2. การติดตั้ง Libraries

เริ่มต้นด้วยการสร้างโปรเจกต์ใหม่และติดตั้ง libraries ที่เลือก

2.1 การติดตั้ง TinyMCE

npm install tinymce

2.2 การติดตั้ง Quill

npm install quill

3. การใช้งาน TinyMCE

หลังจากติดตั้ง TinyMCE แล้ว เราจะมาดูวิธีการใช้งานเบื้องต้น

3.1 การสร้าง HTML Element สำหรับ TinyMCE

สร้าง textarea element ใน HTML ของคุณ:

<textarea id="tinymce-editor">
  <p>This is some initial content of the editor.</p>
</textarea>

3.2 การ Initializing TinyMCE

เขียน JavaScript เพื่อ initialize TinyMCE บน textarea element:

import tinymce from 'tinymce';
import 'tinymce/themes/silver';
import 'tinymce/plugins/paste';
import 'tinymce/plugins/link';
import 'tinymce/plugins/lists';

tinymce.init({
  selector: '#tinymce-editor',
  plugins: 'paste link lists',
  toolbar: 'undo redo | bold italic | bullist numlist | link',
  content_css: 'default', // Or specify a custom CSS file
});

คำอธิบาย:

selector: ระบุ element ที่จะใช้ TinyMCE
plugins: กำหนด plugins ที่ต้องการใช้งาน (เช่น paste, link, lists)
toolbar: กำหนดปุ่มเครื่องมือที่จะแสดงใน toolbar
content_css: กำหนด CSS ที่จะใช้กับเนื้อหาภายใน editor

3.3 การปรับแต่ง Styles ด้วย Tailwind CSS

เราสามารถปรับแต่ง styles ของ TinyMCE ได้โดยการกำหนด CSS class เองและเพิ่มเข้าไปใน content_css หรือโดยการ override styles ใน CSS file ของเรา

ตัวอย่างการสร้าง CSS file (./src/css/tinymce.css):

body {
  @apply text-gray-700; /* Apply Tailwind CSS class */
  font-family: sans-serif;
}

p {
  @apply mb-4;
}

จากนั้นแก้ไข tinymce.init:

tinymce.init({
  selector: '#tinymce-editor',
  plugins: 'paste link lists',
  toolbar: 'undo redo | bold italic | bullist numlist | link',
  content_css: '/src/css/tinymce.css', // Updated to your CSS file
});

ข้อผิดพลาดที่พบบ่อย:

ลืม import CSS file ใน JavaScript
CSS classes ไม่ถูก apply อย่างถูกต้อง (ตรวจสอบว่า Tailwind CSS ถูก compile อย่างถูกต้อง)

4. การใช้งาน Quill

มาดูวิธีการใช้งาน Quill กันบ้าง

4.1 การสร้าง HTML Element สำหรับ Quill

สร้าง div element ใน HTML ของคุณ:

<div id="quill-editor"></div>

4.2 การ Initializing Quill

เขียน JavaScript เพื่อ initialize Quill บน div element:

import Quill from 'quill';
import 'quill/dist/quill.snow.css';

const quill = new Quill('#quill-editor', {
  theme: 'snow',
  modules: {
    toolbar: [
      ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
      ['blockquote', 'code-block'],

      [{ 'header': 1 }, { 'header': 2 }],               // custom button values
      [{ 'list': 'ordered'}, { 'list': 'bullet' }],
      [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
      [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
      [{ 'direction': 'rtl' }],                         // text direction

      [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
      [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

      [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults and custom values
      [{ 'font': [] }],
      [{ 'align': [] }],

      ['clean']                                         // remove formatting button
    ]
  }
});

คำอธิบาย:

theme: กำหนด theme ของ Quill (เช่น snow, bubble)
modules: กำหนด modules ที่ต้องการใช้งาน (เช่น toolbar, keyboard)
toolbar: กำหนดปุ่มเครื่องมือที่จะแสดงใน toolbar

4.3 การปรับแต่ง Styles ด้วย Tailwind CSS

Quill มาพร้อมกับ CSS file ของตัวเอง (quill.snow.css) เราสามารถปรับแต่ง styles ได้โดยการ override styles ใน CSS file ของเรา หรือโดยการเพิ่ม CSS classes เข้าไปใน Quill editor container

ตัวอย่างการเพิ่ม CSS classes เข้าไปใน Quill editor container:

<div id="quill-editor" class="bg-white rounded-md shadow-sm border border-gray-300 p-4"></div>

ข้อผิดพลาดที่พบบ่อย:

ลืม import CSS file ของ Quill
Styles ของ Quill ไม่ถูก override อย่างถูกต้อง (ตรวจสอบ specificity ของ CSS selectors)

5. การจัดการ Content

ทั้ง TinyMCE และ Quill มี methods สำหรับจัดการ content ของ editor

5.1 การดึง Content

TinyMCE:

const content = tinymce.get('tinymce-editor').getContent();

Quill:

const content = quill.root.innerHTML; // or quill.getContents() for Delta format

5.2 การตั้งค่า Content

TinyMCE:

tinymce.get('tinymce-editor').setContent('<p>New content</p>');

Quill:

quill.root.innerHTML = '<p>New content</p>'; // or quill.setContents(delta) for Delta format

6. กรณีใช้งานจริง

กรณีที่ 1: สร้าง Blog Editor

คุณสามารถใช้ WYSIWYG editor เพื่อให้ผู้ใช้สามารถเขียนบทความ blog ได้อย่างง่ายดาย โดยมี toolbar ที่มีเครื่องมือพื้นฐาน เช่น ตัวหนา, ตัวเอียง, หัวข้อ, ลิงก์, และรายการ

กรณีที่ 2: สร้าง Comment Editor

คุณสามารถใช้ WYSIWYG editor เพื่อให้ผู้ใช้สามารถเขียน comments ที่มีรูปแบบได้ เช่น การใส่ตัวหนา, ตัวเอียง, หรือการใส่ลิงก์

7. สรุป

ในบทความนี้ เราได้เรียนรู้วิธีการสร้าง WYSIWYG editors โดยใช้ Tailwind CSS ร่วมกับ TinyMCE และ Quill เราได้เห็นวิธีการติดตั้ง libraries, การ initialize editors, การปรับแต่ง styles ด้วย Tailwind CSS, และการจัดการ content ของ editor

การสร้าง WYSIWYG editors เป็นเรื่องที่ซับซ้อน แต่ด้วย libraries ที่มีอยู่และการใช้ Tailwind CSS เพื่อปรับแต่ง styles ทำให้เราสามารถสร้าง editors ที่มีประสิทธิภาพและสวยงามได้

ในบทความถัดไป เราจะมาเรียนรู้เกี่ยวกับการสร้าง Chat Interfaces ด้วย Tailwind CSS