Thứ Ba, 16 tháng 4, 2013

Cách nhúng Tinymce làm bộ soạn thảo cho website

Tinymce là 1 trong những editor được sử dụng rất nhiều, điểm lợi khi dùng mce là đơn giản để cài đặt, dễ dàng thay đổi, tùy chỉnh, hạn chế lỗi phát sinh sqlinjection.
Trong bài viết này sử dụng Version 3.3.9.2 để hướng dẫn
Để nhúng Tinymce bạn cần tiến hành 4 bước:
Bước 1 : Download bộ Tinym, bạn nên download bộ Main packages (stable).

Bước 2 :  Chèn file tinymce.js vào giữa cặp thẻ <head></head>.

Bước 3 : Tủy chỉnh button muốn hiển thị (có thể để mặc định không cần sửa)
Mặc định tinymce nhận tất cả các thẻ <textarea> và thay thế thành editor mce, tuy nhiên đôi lúc trong thiết kế nó lại không cần thiết vì thế tôi khuyên bạn cài đặt để tinymce chỉ nhận các thẻ textarea chỉ định.

Bước 4: Tùy chỉnh thẻ textarea
Từ giờ ở thẻ textarea nào bạn muốn chèn tinymce vào thì sử dụng như bên dưới:
<textarea name=”content” id=”textarea_full” style=”width:100%; “> </textarea>
Với các thẻ textarea không có id=’textarea_full’ sẽ không được nhúng tinymce
Luu ý: Một số bạn khi thêm 1 thẻ <textarea> nữa vào thì cũng hiện button như nhau thì ta chú ý đoạn:

tinyMCE.init({
// General options
mode : "textareas",
==> Đây là đoạn code mặc định. Còn tránh trường hợp mình ko muốn 1 thẻ textarea khác cũng hiện các button thì thay đoạn trên bằng đoạn sau:


tinyMCE.init({
// General options
mode : "exact",
elements :"textarea_full",// cái này là tên id của thẻ <textarea> mà mình muốn hiện button.

1 nhận xét:

  1. Bạn ơi, cho mình hỏi, mình cài rồi, nhưng là sao để nó lưu vào csdl dưới dạng html mà khi mình truy xuất ra nó có thể hiển thị các thành phần như table hay ảnh được bạn? cảm ơn bạn nhiều!

    Trả lờiXóa