HƯỚNG DẪN TÍCH HỢP TEXT EDITOR MÃ NGUỒN MỞ

📝 Giới thiệu chung về Text Editor mã nguồn mở

Rich Text Editor là bộ công cụ soạn thảo văn bản trực quan (WYSIWYG) nhẹ, mạnh mẽ và hoàn toàn độc lập. Dự án được xây dựng 100% bằng HTML, CSS và JavaScript thuần mà không phụ thuộc vào bất kỳ thư viện bên thứ ba nào (không cần jQuery, npm hay các trình đóng gói phức tạp).

Trình soạn thảo này được thiết kế tối ưu để tích hợp nhanh gọn vào mọi dự án Web thuần, PHP, Laravel (Blade), các component như Bootstrap Modal, hay các ứng dụng sử dụng kỹ thuật Ajax/Fetch.

✨ Tính Năng Nổi Bật

• ⚡ 100% Vanilla JS & Siêu nhẹ: Chỉ bao gồm 1 file .css và 1 file .js. Tự động khởi tạo (Auto-init) ngay khi DOM sẵn sàng.

• 🔄 Two-way Sync Tự Động (Property Interceptor Hook):

  • Khi người dùng gõ trong trình soạn thảo, dữ liệu lập tức đồng bộ sang thẻ <textarea> gốc và kích hoạt sự kiện input / change.
  • Khi gán giá trị bằng JavaScript (textarea.value = '...'), khung WYSIWYG tự động cập nhật ngay lập tức mà không cần gọi hàm API thủ công.

• ✍️ Định dạng văn bản toàn diện:

  • Hỗ trợ Heading (H1, H2, H3), Paragraph (P), Blockquote, Code/Pre block.
  • Tùy chỉnh Font size (12px – 30px), In đậm, In nghiêng, Gạch chân, Gạch ngang, Chỉ số (x², x₂), Xóa định dạng.
  • Bảng chọn Màu chữ (Text Color) và Màu nền/Đánh dấu (Highlight Color).
  • Căn lề đa dạng, tạo danh sách (Ul/Ol), thụt lề (Indent/Outdent).

• 🖼️ Quản lý Đa phương tiện thông minh:

  • Tải ảnh từ thiết bị (tự động chuyển sang Base64 Data URI), hỗ trợ kéo thả file ảnh hoặc dán ảnh trực tiếp từ Clipboard (Ctrl + V).
  • Di chuyển ảnh bằng thao tác kéo thả ngay trong bài viết (không bị nhân bản).
  • Thanh công cụ nổi (Floating Image Toolbar): Căn lề ảnh, đổi kích thước (25%, 50%, 75%, 100%), thêm chú thích (Caption) và xóa ảnh.
  • Tự động nhúng video YouTube chuẩn khung hình Responsive 16:9.

• 📊 Bảng biểu & Khối nội dung nâng cao:

  • Tạo bảng dữ liệu tùy chọn (thêm/xóa hàng/cột) ngay tại vị trí con trỏ.
  • Chèn khối thông báo (Callout Box: Success, Warning, Info, Danger), Badges và bảng Emoji nhanh.

• 🎙️ Soạn thảo bằng Giọng nói Tiếng Việt: Tích hợp Web Speech API giúp chuyển giọng nói thành văn bản realtime.

• 🌙 Chế độ Nâng cao & Xuất bản:

  • Hỗ trợ Dark Mode (Giao diện tối), Fullscreen, và tính năng xem/sửa Mã nguồn HTML thô.
  • Tích hợp Preview Modal, Tìm kiếm & Thay thế, In ấn (Ctrl + P), xuất file Microsoft Word (.doc) và file .html.
  • Thanh trạng thái Realtime: Thống kê số ký tự, số từ và thời gian đọc ước tính.

📂 Cấu Trúc Thư Mục

text-editor-opensource/
├── rich-text-editor.css        # Toàn bộ giao diện, responsive & dark mode của Editor
├── rich-text-editor.js         # Nhân xử lý WYSIWYG, Two-way Sync & extension
├── rich-text-editor-guide.html # Trang tài liệu hướng dẫn & Live Demo trực quan
└── README.md                   # Tài liệu giới thiệu dự án

🚀 Cài Đặt Nhanh Trong 3 Bước

Bước 1: Nhúng file CSS vào thẻ <head>

<link rel="stylesheet" href="path/to/rich-text-editor.css">

Bước 2: Nhúng file JS trước thẻ đóng </body>

<script src="path/to/rich-text-editor.js"></script>

Bước 3: Thêm class rich-editor vào thẻ <textarea> cần chuyển đổi

<textarea
    name="noi_dung"
    class="rich-editor"
    data-height="280px"
    placeholder="Nhập nội dung bài viết tại đây..."></textarea>

💡 Tự động khởi tạo: Ngay khi trang tải xong (DOMContentLoaded), trình soạn thảo sẽ tự động quét mọi thẻ <textarea class="rich-editor"> hoặc <textarea data-rich-editor> để dựng giao diện mà bạn không cần viết thêm bất kỳ dòng JS nào.

⚙️ Các Thuộc Tính Cấu Hình (HTML Attributes)

Bạn có thể cấu hình nhanh editor ngay trên HTML thông qua các attributes:

🛠️ Bảng Hàm JavaScript (Programmatic API)

1. Khởi tạo hoặc lấy Instance

// Cách 1: Khởi tạo thủ công cho một textarea cụ thể (hữu ích khi render SPA/React/Vue)
const editor = new RichTextEditor('#myTextarea', {
    height: '320px',
    placeholder: 'Nhập nội dung bài viết...'
});

// Cách 2: Lấy instance đã được tự động khởi tạo trước đó
const editor = RichTextEditor.getInstance('#myTextarea');

2. Các phương thức thao tác dữ liệu

🔄 Cơ Chế Two-Way Sync Với Ajax & Bootstrap Modal

Nhờ kỹ thuật Property Interceptor Hook trên HTMLTextAreaElement.prototype, bạn có thể thao tác với <textarea> y hệt như một ô input thông thường. Khung trực quan sẽ tự lắng nghe và render lại.

// Ví dụ: Tải dữ liệu bài viết qua Fetch/Ajax và đổ vào Modal chỉnh sửa
fetch('/api/posts/1')
    .then(res => res.json())
    .then(post => {
        // Bạn chỉ cần gán giá trị trực tiếp vào textarea gốc
        document.getElementById('edit_post_noi_dung').value = post.noi_dung || '';

        // 👉 Khung soạn thảo trực quan (WYSIWYG) sẽ TỰ ĐỘNG cập nhật ngay lập tức!
    });

🎨 Tùy Biến Màu Sắc Thương Hiệu (Theme Customization)

Rất đơn giản để đổi màu giao diện Editor cho khớp với màu sắc hệ thống (Branding) của bạn. Chỉ cần ghi đè các biến CSS ở root:

:root {
    --rte-primary: #2563eb;       /* Màu chủ đạo mới (ví dụ: Xanh dương) */
    --rte-primary-hover: #1d4ed8; /* Màu khi hover */
    --rte-primary-light: #eff6ff; /* Màu nền phụ nhạt (cho button/active state) */
    --rte-border-focus: #2563eb;  /* Màu viền khi focus vào editor */
}

🧪 Xem Hướng Dẫn & Dùng Thử (Live Demo)

Bạn có thể tải source code về và mở trực tiếp file rich-text-editor-guide.html trên trình duyệt để đọc tài liệu chi tiết và vọc thử khung soạn thảo trực tiếp (Sandbox Playground) mà không cần cài đặt server.

📄 Giấy Phép & Tác giả

• Giấy phép: Dự án được phát hành dưới dạng mã nguồn mở (MIT License) — hoàn toàn miễn phí để sử dụng, chỉnh sửa và tích hợp vào các dự án cá nhân cũng như thương mại.
• Tác giả: PMN (nhut-share-code)
• • GITHUBT Link