Hướng dẫn cài đặt Ckeditor, Ckfinder

Tham khảo bài viết Hướng dẫn cài đặt Ckeditor, Ckfinder để giúp cho trang web của bạn hoạt động hiệu quả hơn, Tìm hiểu về trình soạn thảo thịnh hành nhất hiện nay, chi tiết như nào hãy cùng chúng tôi phân tích:

Hướng dẫn cài đặt Ckeditor, Ckfinder

Mục Lục [Ẩn]

CKEditor là gì?

CKEditor là một trình soạn thảo văn bản HTML hỗ trợ người dùng trong việc soạn thảo văn bản HTML trong việc thiết kế website, Điểm nổi bật của CKEditor là đơn giản, nhẹ gọn mà đầy đủ chức năng, cài đặt dễ dàng, miễn phí.

Hướng dẫn tải Ckeditor

- Vào google gõ từ khóa download ckeditor, hoặc vào thẳng trang https://ckeditor.com/

- Thường vào google sẽ hiện nhiều version khác nhau, nhưng tốt nhất hãy tải bản mới và phải là bản đầy đủ, nên tốt nhất vào thẳng trang chủ của Ckediter để tải bản mới hiện hành, Tải bản thấp hơn vẫn được nhưng phải kiểm tra xem bản đó có bị lỗ hỏng bảo mật gì không, mấy bản lâu quá thì hạn chế sài.

Rê chuột vào menu Ckeditor 5, sau đó nhấn nút Download, chú ý chổ menu Ckeditor 5 sẽ thay đổi tùy theo phiên bản hiện tại mới nhất mà trang chủ sẽ cho hiện ra.

Chọn các tùy chọn và nhấn Download để tải về

Hướng dẫn cài đặt Ckeditor

Sau khi tải về giải nén thì up thư mục ckeditor lên source web

Nhúng file ckeditor.js vào head

<script src="ckeditor/ckeditor.js"></script>

Ở thẻ html đặt class ckeditor là chạy được

CKfinder là gì?

CKfinder là 1 trình quản lý file, nó cho phép chúng ta quản lý file, folder trên server, upload file từ client. Hiện tại nếu bạn chỉ sử dụng CKEditor thì chức năng upload ảnh từ client và chèn vào bài viết k sử dụng đc, bạn có thể thấy hình demo bên dưới.

vì vậy chúng ta cần tích hợp CKfinder vào CKEditor để dễ dàng chèn ảnh vào bài viết 1 cách đơn giản, dễ sử dụng.

Hướng dẫn tải Ckfinder

- Vào link https://ckeditor.com/ckfinder/download/  hoặc vào google gõ download Ckfinder 

Nhấn Download ZIP package tải về và giải nén, sau đó up thư mục ckfinder lên web

Hướng dẫn tích hợp Ckfinder vào Ckeditor

- Nhúng đoạn js vào thẻ head <script src="ckfinder/ckfinder.js"></script> 

- Vào file ckeditor/config.js để nhúng file ckfinder/ckfinder.php vào, ở đây ckfinder/ckfinder.html đã đổi thành ckfinder/ckfinder.php

Để chọn thư mục lưu hình ảnh ckfinder/config.php

Vào baseUrl của $config['backends'][] để đặt đường dẫn lưu hình, Sau khi cài đặt xong thì phần up hình sẽ hoạt động, tuy nhiên để sài bản chính thức thì phải có key

Hướng dẫn lấy key cho Ckfinder

- Để lấy được key ta vào trang https://ckfinder.sanvu88.net/ hoặc vào google gõ từ khóa get key Ckfinder online hoặc get licenseKey Ckfinder online, trên mạng có rất nhiều trang lấy key

Chọn Version: 3.x.x, Nhập tên miền vào License Name, Nhấn Generate nhiều lần để lấy License Key

Sau khi lấy key thì ta vào file ckfinder/config.php nhập licenseName và licenseKey vào, nếu key vẫn còn bản demo thì vào lại trang lúc nảy lấy lại key khác, sau khi chèn key xong thì thêm hình bình thường.

Cấu hình width height của thẻ img không dùng css trong Ckeditor, Ckfinder

Cấu hình trong file ckeditor/config.js bỏ đoạn code này vào

config.disallowedContent = 'img{width,height}';
config.extraAllowedContent = 'img[width,height]';

Kết quả width, height của img sau khi gắn

<img alt="Hướng dẫn cài đặt Ckeditor, Ckfinder" height="768" src="https://webmoi.vn/upload/images/huong-dan-cai-dat-ckeditor-ckfinder-03.png" title="Hướng dẫn cài đặt Ckeditor, Ckfinder" width="1366" class="loading" data-was-processed="true">

Lời kết

Cảm ơn các bạn đã tham khảo bài viết về Ckeditor, Ckfinder