Cách tích hợp CKFinder và CKEditor trong Laravel

NetworkEngineer · T.M.Hai 31, 2020, 10:39:25 SÁNG

Cách tích hợp CKFinder và CKEditor trong Laravel

1. Giới thiệu.

Ở bài này mình sẽ hướng dẫn cách cấu hình CKFinder vào CKEditor bằng nhiều cách như cấu hình trong các tập tin trong thư mục CKFinder và CKEditor.

Khi chúng ta định dạng ví dụ như font chữ hay màu sắc thì chúng ta không cần phải chỉnh sửa viết mã nguồn và việc đó là của CKEditor nó làm khi chúng ta định dạng và nhập dữ liệu vào cơ sở dữ liệu.

Sử dụng CKEditor thì không thể tải ảnh từ máy tính lên, vì lý do như vậy nên chúng ta sẽ tìm hiểu cách để tích hợp CKFinder vào để.

2. Cách cấu hình CKFinder và CKEditor .

Trước tiên hãy tải mã nguồn của CKEditor từ trang chủ về tại đây Đăng nhập để xem liên kết
Giải nén và sao chép thư mục CKEditor bỏ vào trong dự án của bạn.

Chèn tập tin ckeditor.js vào trong trang Web mà bạn cần. Tạo thẻ textarea hoặc một thẻ bất kỳ có ID là noidung.

Mã nguồn [Chọn]

CKEDITOR.replace( 'noidung');

Dưới đây là mẫu một đoạn mã để chèn ckeditor.js vào trong.

Mã nguồn [Chọn]


<html>
 <head>
  <title> Ckeditor and ckfinder</title>
  <script type="text/javascript" src="ckeditor/ckeditor.js"> </script>
 </head>
 <body>
  <form action="" method="post" >
   <textarea id="noidung"></textarea>
  </form>
  <script>
    CKEDITOR.replace( 'noidung');
  </script>
 </body>
</html>

Kết quả mà chúng ta sẽ có được như sau đây.

3. Tích hợp CKFinder và CKEditor vào Laravel.

Chúng ta sẽ tích hợp trực tiếp vào tập tin mẫu ở trên như sau đây.

Mã nguồn [Chọn]

<html>
 <head>
  <title> Ckeditor and ckfinder</title>
  <script type="text/javascript" src="ckeditor/ckeditor.js"> </script>
 </head>
 <body>
  <form action="" method="post" >
   <textarea id="noidung"></textarea>
  </form>
  <script>
    CKEDITOR.replace( 'noidung',
  {
   filebrowserBrowseUrl : 'ckfinder/ckfinder.html',
   filebrowserImageBrowseUrl : 'ckfinder/ckfinder.html?type=Images',
   filebrowserFlashBrowseUrl : 'ckfinder/ckfinder.html?type=Flash',
   filebrowserUploadUrl : 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
   filebrowserImageUploadUrl : 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images',
   filebrowserFlashUploadUrl : 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash'
  });
  </script>
 </body>
</html>

Tiếp theo hãy mở tập tin trong thư mục CKFinder/config.php và chèn hoặc sửa lại đoạn mã như sau đây.

Mã nguồn [Chọn]


$config['authentication'] = function () {
    return true;
};

Đây là kết quả sau khi đã tích hợp.

VietNetwork.Vn

Tìm kiếm