Hướng dẫn

Hướng dẫn nhúng TinyMCE vào trang web

26 / 08 / 2016

TinyMCE là một trong những WYSIWYG phổ biến nhất hiện nay, và đặc biệt là được mã nguồn mở nên mọi người có thể sử dụng miễn phí thoải mái, ngoại trừ bản Enterprise ra thì cần phải trả tiền để sử dụng thêm nhiều chức năng xịn khác. Về cơ bản, thực sự là quá đủ dùng để soạn thảo nội dung cho trang web rồi.

Trông TinyMCE có nhiều chức năng, nên nghĩ là cấu hình rồi cài đặt sẽ là khá cồng kềnh, phức tạp; nhưng thực ra không phải vậy, mà rất đơn giản. 

Bạn có thể load lấy script của tinyMCE thông qua CDN,

<script src="//cdn.tinymce.com/4/tinymce.min.js"></script>

hoặc có thể download trực tiếp về project rồi include vào trong project.

Để sử dụng, chúng ta sẽ cần thực hiện khởi tạo editor và chỉ dịnh các tag nào trên trang web sẽ là dùng để soạn thảo nội dung, thường thì là thẻ textarea.

Các bạn thêm đoạn này vào sau đoạn load script của TinyMCE,

tinymce.init({
    selector: 'textarea'
});

Bên trong TinyMCE có nhúng jQuery nên các bạn có thể thay chọn theo kiểu jQuery, ví dụ selector: $('#edit-box');

Bạn có thể tham khảo project mẫu đơn giản, kodemate/nhung-tinymce-vao-web

TinyMCE có khá nhiều cấu hình cho soạn thảo văn bản, hãy đọc tài liệu để tham khảo thêm.


Quay lại danh sách
CHIA SẺ BÀI VIẾT
KodeMate
Chat với chúng tôi Chat với chúng tôi - kodemate.com