Loại bỏ thẻ p tự động trong TinyMCE

Trong nhiều trường hợp, bạn cho phép người dùng quản lý một thành phần nào đó trên trang web bằng cách nhập liệu qua một textarea TinyMCE, ví dụ, mình cho phép người dùng quản lý thông tin footer (người dùng có thể ghi thông tin bản quyền, liên lạc,…) của trang thông qua TinyMCE, vì người dùng có thể cần định dạng thông tin footer. Mặc định, TinyMCE sẽ tự động bao nội dung người dùng gõ trong cặp thẻ p.

Tuy nhiên, trong nhiều trường hợp, cặp thẻ p này, do có định dạng, sẽ gây ra hiển thi không mong muốn so với dự tính. Bạn có thể giải quyết bằng cách dùng CSS, để định dạng thẻ p. Ví dụ, nếu mình muốn loại bỏ khoảng trống trình duyệt tạo ra do thẻ p, mình có thể dùng:

#footer p {
  margin:0;
  padding:0;
}

Mình cũng từng làm vậy, nhưng có lúc gặp vấn đề trong trường hợp mình định dạng cho văn bản trong thẻ p đổ bóng, lúc đó, p cắt ngang bóng đổ của văn bản, phải viết CSS để giải quyết nữa khá mất công.

Sau khi tham khảo, có một cách khác hữu hiệu hơn là hãy bỏ thẻ p tự động ra khỏi TinyMCE. Để làm điều đó, hãy thêm 3 dòng sau vào đoạn mã JavaScript khởi tạo TinyMCE:

tinymce.init({
  forced_root_block : "",
  force_br_newlines : true,
  force_p_newlines : false,
});