TinyMCE: Hướng Dẫn Sử Dụng Chi Tiết và Tối Ưu cho Website Việt Nam

TinyMCE là một trình soạn thảo văn bản HTML WYSIWYG (What You See Is What You Get) mã nguồn mở dựa trên Javascript, được phát hành theo giấy phép LGPL. Công cụ này giúp đơn giản hóa quá trình tạo nội dung web, cho phép người dùng dễ dàng chỉnh sửa và định dạng văn bản như viết blog, mô tả sản phẩm, và nhiều hơn nữa. Hơn nữa, TinyMCE hoàn toàn miễn phí và dễ dàng tích hợp vào nhiều nền tảng khác nhau.

TinyMCE được ứng dụng rộng rãi trong nhiều ngôn ngữ lập trình. Việc cài đặt có thể thực hiện bằng cách tải gói cài đặt hoặc sử dụng dòng lệnh trên terminal. Trong bài viết này, chúng ta sẽ tìm hiểu cách tích hợp TinyMCE vào một dự án sử dụng framework ExpressJS, đồng thời tối ưu hóa để phù hợp với người dùng Việt Nam.

1. Cài Đặt TinyMCE

1.1. Sử dụng Bower

Chúng ta sẽ sử dụng Bower, một công cụ quản lý các tài nguyên frontend phổ biến, để cài đặt TinyMCE. Nếu bạn chưa quen với Bower, hãy tham khảo các bài viết hướng dẫn sử dụng Bower trước khi tiếp tục.

Để thêm TinyMCE vào dự án của bạn, hãy sử dụng câu lệnh sau trong terminal:

bower install tinymce

1.2. Sử dụng npm

Ngoài Bower, bạn cũng có thể sử dụng npm, trình quản lý gói phổ biến của Node.js, để cài đặt TinyMCE. Câu lệnh như sau:

npm install tinymce

2. Sử Dụng TinyMCE trong Dự Án ExpressJS

Sau khi cài đặt TinyMCE, bước tiếp theo là nhúng nó vào dự án của bạn. Dưới đây là một ví dụ về form tạo bài viết trong ExpressJS:

<!-- Ví dụ form tạo bài viết -->
<h1><%= __('Add post') %></h1>

<h3><%= __('Create new post') %></h3>





<%- contentFor('appjs') %>

Để TinyMCE hoạt động, bạn cần nhúng đoạn script sau vào trang web của mình:

tinymce.init({
  selector: '#content', // ID của textarea mà TinyMCE sẽ thay thế
  plugins: 'advlist autolink lists link image charmap print preview hr anchor pagebreak',
  toolbar_mode: 'floating',
  // Các tùy chọn khác có thể được thêm vào đây
});

Trong ví dụ trên, #content là ID của thẻ <textarea> mà TinyMCE sẽ thay thế bằng trình soạn thảo WYSIWYG.

Lưu ý về đường dẫn:

Khi sử dụng Bower, các package thường được lưu trữ trong thư mục public/bower. Bạn có thể cấu hình đường dẫn này trong file .bowerrc của dự án.

{
  "directory": "public/bower"
}

Giao diện TinyMCE sau khi tích hợpGiao diện TinyMCE sau khi tích hợp

3. Tùy Chỉnh Giao Diện và Chức Năng của TinyMCE

Đoạn code tinymce.init() quyết định giao diện và chức năng của trình soạn thảo HTML. Dưới đây là một số tùy chọn quan trọng:

  • plugins: Xác định các plugin (phần mở rộng) sẽ được kích hoạt. Ví dụ:
    • table: Hỗ trợ chèn và làm việc với bảng biểu.
    • image: Cho phép chèn ảnh vào nội dung.
    • advlist: Thêm các tùy chọn nâng cao cho danh sách (ví dụ: kiểu danh sách tùy chỉnh).
    • Xem danh sách đầy đủ các plugin tại sentayho.com.vn/wiki.php/Plugins (ví dụ).
  • toolbar: Cấu hình các công cụ hiển thị trên thanh công cụ. Ví dụ:
    • undo, redo: Các nút hoàn tác và làm lại.
    • alignleft, aligncenter, alignright, alignjustify: Các tùy chọn căn lề văn bản.
    • formatselect, fontselect, fontsizeselect: Các tùy chọn định dạng font chữ.
    • bold, italic, underline: Các tùy chọn định dạng chữ in đậm, in nghiêng, gạch chân.

Thứ tự các công cụ trên thanh toolbar sẽ tương ứng với thứ tự được khai báo trong cấu hình.

4. Chèn Ảnh vào Bài Viết

Việc chèn ảnh là một nhu cầu phổ biến khi soạn thảo nội dung. TinyMCE cung cấp nhiều cách để thực hiện việc này.

4.1. Sử dụng Plugin image có sẵn

Plugin image cho phép chèn ảnh từ một đường dẫn URL. Tuy nhiên, plugin này không hỗ trợ tải ảnh trực tiếp từ máy tính.

Chèn ảnh bằng plugin imageChèn ảnh bằng plugin image

Để kích hoạt plugin này, bạn cần thêm image vào danh sách plugins trong cấu hình của TinyMCE.

tinymce.init({
  selector: '#content',
  plugins: 'image',
  toolbar: 'image', // Thêm nút image vào toolbar
  // ... các cấu hình khác
});

4.2. Tải Ảnh từ Local (Sử Dụng Plugin Tùy Chỉnh)

Để cho phép người dùng tải ảnh trực tiếp từ máy tính của họ, bạn cần sử dụng một plugin tùy chỉnh hoặc một giải pháp tích hợp khác. Có nhiều plugin miễn phí và trả phí có sẵn trên thị trường để đáp ứng nhu cầu này. Một giải pháp phổ biến là sử dụng một plugin cho phép tải ảnh lên server và sau đó chèn đường dẫn ảnh vào trình soạn thảo.

Sau đây là hình ảnh demo về một plugin tải ảnh:

Demo plugin tải ảnh từ localDemo plugin tải ảnh từ local

5. Tối Ưu Hóa TinyMCE cho Người Dùng Việt Nam

Để TinyMCE thân thiện hơn với người dùng Việt Nam, bạn có thể thực hiện các tùy chỉnh sau:

  • Ngôn ngữ: Thiết lập ngôn ngữ mặc định của TinyMCE sang tiếng Việt. Bạn có thể tải gói ngôn ngữ tiếng Việt từ trang chủ của TinyMCE và cấu hình nó trong init.
  • Font chữ: Chọn các font chữ tiếng Việt phổ biến như Arial, Times New Roman hoặc các font chữ Unicode khác.
  • Kiểm tra chính tả: Tích hợp trình kiểm tra chính tả tiếng Việt để giúp người dùng viết nội dung chính xác hơn.

Kết luận

TinyMCE là một trình soạn thảo WYSIWYG mạnh mẽ và dễ sử dụng, cung cấp nhiều tùy chọn tùy chỉnh để phù hợp với nhu cầu của bạn. Hy vọng bài viết này đã cung cấp cho bạn những kiến thức cơ bản để tích hợp và sử dụng TinyMCE trong dự án ExpressJS của mình, đặc biệt là cho thị trường Việt Nam. Hãy khám phá thêm các plugin và tùy chọn cấu hình khác để tận dụng tối đa sức mạnh của TinyMCE!