Tích hợp trình soạn thảo Ckeditor vào WordPress

Tích hợp trình soạn thảo Ckeditor vào WordPress – Ckeditor là trình soạn thảo trên Website nổi tiếng. Và được nhiều người dùng sử dụng nhất hiện nay. Tuy nhiên rất nhiều lập trình viên gặp khó khăn khi tích hợp chúng vào mã nguồn WordPress. Vì vậy trong bài viết này, Tòn sẽ hướng dẫn chi tiết cách tích hợp Ckeditor vào website WordPress cho các anh em nhé!

⭐Các bước tích hợp trình soạn thảo Ckeditor vào WordPress

Bài này Tòn sẽ lấy Contact Form 7 làm ví dụ cho anh em thực hiện nhé. Các bước làm ngay bên dưới.

Bước 1: Tải Ckeditor

+ Truy cập vào địa chỉ dowload ckeditor http://ckeditor.com/download

+ Chọn CKEditor CDN và lấy link gọi mã js của nó có dạng như dưới đây”

<script src="//cdn.ckeditor.com/4.15.0/standard/ckeditor.js"></script>

+ Tiếp tục mở file header.php của theme và dán đoạn lệnh gọi phía trên vào trước thẻ đóng </head>

Tích hợp trình soạn thảo Ckeditor vào WordPress

Bước 2: Khai báo Ckeditor vào nơi bạn muốn hiển thị trình soạn thảo

+ Tạo một textarea trong contact form 7 có khai báo thuộc tính id. Giá trị của thuộc tính này bạn có thể đặt tùy ý. Ở đây mình ví dụ là id=’noidung’

+ Dùng javascript, thay thế textarea bên trên bằng editor. Giá trị noidung ở đây chính là giá trị của thuộc tính id đặt bên trên.

<script>CKEDITOR.replace('noidung');</script>

Tích hợp trình soạn thảo Ckeditor vào Contact Form 7

+ Các bạn làm theo hình trên và lưu lại ta được kết quả như hình dưới đây

Lưu ý: 

+ Cách trên đây không cần dùng plugin nhầm đảm bảo tốc độ load cho website ổn định

+ Nếu các bạn dùng plugin CKEditor for WordPress thì bỏ qua bước 1. Nhưng plugin này chỉ dùng khi website bạn không có bất kỳ 1 plugin soạn thảo khác. Vì nếu có sẽ sung đột và gây ra lỗi bạn nhé.

⭐Lời kết

Trên đây là toàn bộ hướng dẫn của Tòn về cách tích hợp trình soạn thảo CKEditor vào Contact Form 7 website WordPress. Hy vọng bài viết sẽ giúp ích cho bạn. Chúc bạn thành công!.

Xem thêm: Các hàm cơ bản thông dụng trong WordPress có thể bạn chưa biết

Xem chi tiết