Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.

  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

Hướng dẫn cài đặt tích hợp CKFinder vào CKEditor

Chủ đề thuộc danh mục 'HTML - CSS - JS - PHP - ASP' được đăng bởi Mixer_C6, 5/3/18.

Lượt xem: 11,652

  1. Mixer_C6 Banned

    [​IMG]

    Trong bài này mình sẽ hướng dẫn các bạn tích hợp CKFinder vào CKEditor. CKEditor là một công cụ nổi tiếng để soạn thảo các đoạn văn bản có độ tùy biến cao, CKFinder là một công cụ upload và quản lý file rất mạnh mẽ. Cũng có nhiều plugin khác với chức năng tương tự, nhưng CKEditor vs CKFinder vẫn chiếm tỉ lệ lớn trong lập trình web.

    Hỗ trợ tốt với PHP, ASP.NET, JAVA …

    [​IMG]

    Ở trong bài viết này, mình sẽ hướng dẫn các bạn cài đặt CKEditor và tích hợp CKFindervào nó để tăng cường sức mạnh, sử dụng phiên bản dành cho PHP.

    Đầu tiên các bạn download CKEditor và CKFinder tại đây : [LOCK]https://drive.google.com/drive/u/0/folders/0B8JLo31QLl3NWnh1M2NPUldGUUk[/LOCK]

    CKFinder để luôn trong CKEditor cho dễ quản lý, vì 2 cái này luôn đi vs nhau.

    [​IMG]

    Tạo một project, folder chứa mã nguồn để làm ví dụ. Các bạn có thể áp dụng vào Project của các bạn 1 cách tương tự, áp dụng vào các Framework PHP Codeigniter, Laravel…Vì là plugin của jQuery nên file jQuery.js là không thể thiếu, cấu trúc folder của chúng ta sẽ như sau.

    [​IMG]

    Các bạn mở file index. php lên vào add các plugin vào như sau

    <!DOCTYPE html>
    <html lang="vi">
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demo CKEditor & CKFinder - aduka.asia</title>

    <script src="jquery-3.2.1.min.js"></script>
    <script src="ckeditor/ckeditor.js"></script>
    <script src="ckeditor/ckfinder/ckfinder.js"></script>
    </head>
    <body>

    </body>
    </html>
    1. Cài đặt CKEditor
    CKEditor được tích hợp thông qua tag textarea, đặt một cái id tùy các bạn, ở đây mình đặt id="editor" và viết đoạn code jQuery để gọi CKEditor ra

    <textarea id="editor" cols="30" rows="10"></textarea>
    <script>
    var editor = CKEDITOR.replace( 'editor' );
    </script>
    Bây giờ các bạn mở trình duyệt ra và gõ địa chỉ localhost vào project demo của mình, kết quả sẽ hiển thị như sau.

    [​IMG]

    Như vậy là đã cài đặt CKEditor xong, bây giờ hãy click vào phần khoanh đỏ ở trên, nó sẽ hiển thị ra phần upload ảnh của CKEditor.

    [​IMG]

    Nó ko có phần chọn ảnh ở máy tính mà chỉ có phần điền URL ảnh vào. Khá bất tiện đúng không ? Bây giờ mình cần tích hợp thêm CKFinder vào cho nó đẳng cấp nhé !

    2. Cài đặt CKFinder
    Các bạn truy cập vào file : ckeditor/config.js và paste đoạn code sau, có nhiệm vụ là từ CKEditor gọi CKFinder ra.

    CKEDITOR.editorConfig = function( config ) {
    config.filebrowserBrowseUrl = './ckeditor/ckfinder/ckfinder.html';
    config.filebrowserImageBrowseUrl = './ckeditor/ckfinder/ckfinder.html?type=Images';
    config.filebrowserFlashBrowseUrl = './ckeditor/ckfinder/ckfinder.html?type=Flash';
    config.filebrowserUploadUrl = './ckeditor/ckfinder/core/connector/php/connector. php?command=QuickUpload&type=Files';
    config.filebrowserImageUploadUrl = './ckeditor/ckfinder/core/connector/php/connector. php?command=QuickUpload&type=Images';
    config.filebrowserFlashUploadUrl = './ckeditor/ckfinder/core/connector/php/connector. php?command=QuickUpload&type=Flash';
    };
    với đoạn code add thẳng vào file config.js như này thì chỗ nào có ckeditor thì ckfinder sẽ đi kèm luôn, mà không cần phải khai báo thủ công vào mỗi đoạn HTML nữa. Mở lại phần insert ảnh kia sẽ thấy có phần “Duyệt máy chủ”, vậy là đã add thành công CKFinder vào rồi đó ! Nhưng khi ấn vào “Duyệt máy chủ” để tải ảnh thì báo lỗi.

    The file browser is disabled for security reasons. Please contact your system administrator and check the CKFinder configuration file

    [​IMG]

    Vì chưa set quyền được truy cập vào phần quản lý file của CKFinder nên nó báo vậy đó. Bây giờ mở file ckeditor/ckfinder/config. php , đổi giá trị authentication sang true

    $config['authentication'] = function () {
    return true;
    };
    các bạn cấu hình luôn folder để lưu các file upload trong CKFinder, ở phần baseUrl

    $config['backends'][] = array(
    'name' => 'default',
    'adapter' => 'local',
    'baseUrl' => '/demo/upload/',
    // 'root' => '', // Can be used to explicitly set the CKFinder user files directory.
    'chmodFiles' => 0777,
    'chmodFolders' => 0755,
    'filesystemEncoding' => 'UTF-8',
    );
    Vậy là xong rồi đó, các bạn thử upload ảnh lên nhé ! Chúc các bạn thành công, nếu có lỗi trong quá trình cài đặt, các bạn hãy comment xuống phía dưới bài viết này, mình sẽ support nhé.

    [​IMG]

    ...

    Xem thêm các chủ đề cùng chuyên mục

    Facebook Group Việt Designer
    Tham gia nhóm
    Facebook Fanpage Việt Designer
    Thích trang
    Chỉnh sửa lần cuối: 7/3/18
    Mixer_C6, 5/3/18
    #1
  2. Võ Ngọc Nhân

    Võ Ngọc Nhân Mới đăng kí

    CKeditor cũng có plugin upload ảnh mà bạn, thậm chí bạn có thể quăng thẳng ảnh vào vùng nhập văn bản để upload, khá tiện lợi.
    Võ Ngọc Nhân, 5/3/18
    #2
Từ khóa:

Ủng hộ diễn đàn