Hướng dẫn sử dụng thư viện CkFinder - Chèn ảnh trong CkEditor

**nhunhamnho** · 11-12-2013, 04:01 PM

CkFinder là 1 trình quản lý file ( có cả phiển bản cho .net và php ) .Ngoài khả năng quản lý file trên hệ thống , chúng ta có thể tích hợp ckfinder vào thư viện CkEditor để dễ dàng chèn ảnh vào bài viết .Bài viết này chúng tôi hướng dẫn sử dụng thư viện CkFinder cho ứng dụng .net

Download mã nguồn ví dụ tại đây

Để mở mã nguồn ví dụ các bạn cần có VisualStudio 2012 ( hoặc 2010 Sp1 )
- Trước hết các bạn download thư viện CkFinder tại trang chủ : http://cksource.com/ckfinder

1. Cấu hình cài đặt thư viện CKFinder

- Đầu tiên ta tạo mới 1 ứng dụng MVC ( 3 hoặc 4 )
Trước tiên Copy thư mục ckfinder vào project
Copy file CKFinder.dll vào thư mục bin
Add References tới thư mục DLL trên
// mở file Config.ascx và thiết lập các cấu hình sau :

Đặt đường dẫn lưu file mặc định :

BaseUrl = "~/Content/FileManager/";

// Khi này trong Project phải có thư mục :Content/FileManager
Khi upload thì trong thư mục FileManager tự động tạo 4 thư mục sau :
_thumbs
file
flash
images
Cấu hình kiểm tra quyền Upload

Mã:

public override bool CheckAuthentication()
       {     
              return true;
       }

Cấu hình hiển thị CkFinder
Trong file config.js

Mã:

CKFinder.customConfig = function( config )
{     
       config.language = 'vi';
       config.removePlugins = 'help';
};

2. Sử dụng thư viện CKFinder :

Mã:

Script 
<script src="../../Scripts/ckfinder/ckfinder.js"></script>
<script type="text/javascript">
    function BrowseServer() {
        var finder = new CKFinder();
        //finder.basePath = '../';
        finder.selectActionFunction = SetFileField;
        finder.popup();
    }
    function SetFileField(fileUrl) {
        document.getElementById('Image').value = fileUrl;
    }
</script>
Html :
            <input type="button" value="Chọn Ảnh ..." onclick="BrowseServer();"/>

- Muốn hiển thị URL trên 1 textBox , các bạn nhìn vào mã Script ở trên thấy là sẽ hiển thị url cho 1 thẻ input có id là Image
- Ta thêm code như sau :
<input type="text" name="Image" id="Image"/>
Mã toàn bộ trang sử như sau :

Mã:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../Scripts/ckfinder/ckfinder.js"></script>
    <script type="text/javascript">
        function BrowseServer() {
            var finder = new CKFinder();
            //finder.basePath = '../';
            finder.selectActionFunction = SetFileField;
            finder.popup();
        }
        function SetFileField(fileUrl) {
            document.getElementById('Image').value = fileUrl;
        }
    </script>
</head>
<body>    
    <input type="text" name="Image" id="Image" />
    <input type="button" value="Chọn Ảnh ..." onclick="BrowseServer();"/>
</body>
</html>

- Ở trên chúng tôi xử lý với Html thuần , trong ứng dụng MVC thực tên thường có trường hình ảnh lưu đường dẫn bức ảnh .Các bạn có mã RazorView như sau :

Mã:

<div            @Html.EditorFor(model => model.Image)
            <input type="button" value="Chọn Ảnh ..." onclick="BrowseServer();"/>
            @Html.ValidationMessageFor(model => model.Image)
        </div>

- Chạy ví dụ ( các bạn download mã nguồn về chạy ) .Để chạy được ví dụ máy các bạn cần cài Visual Studio 2012 hoặc VS2010 sp1
HomeController được gọi và kết quả như hình sau :

- Nhấn vào button Chọn Ảnh , thư viện CkFinder sẽ được gọi để upload ảnh hoặc chọn ảnh trên server như hình sau :

3. Tích hợp CkFinder chèn ảnh trong CkEditor

Trong file config.js của ckeditor thêm code cấu hình tới đường dẫn ckfinder như sau :

Mã:

config.filebrowserBrowseUrl = '/Scripts/ckfinder/ckfinder.html';
    config.filebrowserImageBrowseUrl = '/Scripts/ckfinder/ckfinder.html?Type=Images';
    config.filebrowserFlashBrowseUrl = '/Scripts/ckfinder/ckfinder.html?Type=Flash';
    config.filebrowserUploadUrl = '/Scripts/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files';
    config.filebrowserImageUploadUrl = '/Scripts/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images';
    config.filebrowserFlashUploadUrl = '/Scripts/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash';

// Chú ý cần chỉ đường dẫn tới file ckfinder chính xác,ở đây file ckfinder nằm trong thư mục:/Scripts/ckfinder

// Khi này khi sử dụng thư viện CkEditor , button upload ảnh sẽ hiển thị popup của CkFinder .
// Các bạn có thể xem mã nguồn ví dụ để biết CkFinder đã tích hợp vào CkEditor bằng HTML thuần
hoặc xem hướng dẫn sử dụng CkEditor Tại Đây

- Chạy mã nguồn , homeController được gọi .Nhấn vào link Tích hợp CkFinder vào CkEditor được kết quản như hình sau :

- nhấn vào button chèn ảnh như hình trên được kết quả như hình sau :

- Và như thế ta đã tích hợp thành công CkFinder vào thư viện CkEditor

View more random threads:

**tuquychin** · 14-12-2013, 01:31 PM

chào bạn, mình đã từng sử dụng công cụ này rồi, nhưng cho tui hỏi thêm, ko biết thằng này có chức năng tìm kiếm ko? hay trỏ tới file hiện tại khi mở ra? ví dụ mình đã chọn 1 hình up lên rồi, sau đó nhấn vào nút chọn ảnh, nó mở cửa sổ ckfinder lên và trỏ tới file hiện hành của nó, mục đích để quản lý file dễ hơn và có những mục đích riêng ấy.

còn nếu ko được thì phải code thêm rồi ^^

**duongthidiu** · 14-12-2013, 05:01 PM

- Có đủ tính năng tìm kiếm , bạn có thể hiển thị các tính năng tìm kiếm , trợ giúp ... hoặc ẩn nó đi
- Ngoài ra bạn có thể download nhiều Plugin tích hợp vào ckfinder trên diễn đàn của ckfinder

**bolobala** · 06-01-2014, 09:27 AM

có cách nào cr@ck ckfinder không hoặc gen key cho nó an toàn cũng được, hướng dẫn một chút xíu về cái này đi

**lacdasaysua** · 14-02-2014, 10:43 AM

Gửi bởi toanzoom

có cách nào cr@ck ckfinder không hoặc gen key cho nó an toàn cũng được, hướng dẫn một chút xíu về cái này đi

Là dân lập trình mà mê bẻ khóa quá ghê , chắc ông bạn thích cả hacker rồi .Mình không bàn luận về mặt phải - trái của việc bẻ khóa .Tuy nhiên nếu người ta đã cho dùng thử vô thời hạn .Chỉ hiện mỗi dòng quảng cáo bản quyền và địa chỉ thì ta bẻ quá có quá lắm không .Cứ thích made in của tui làm gì cơ chứ .

**rungram90** · 28-02-2014, 03:18 PM

Ứng dụng trên được dùng cho những phần mềm nào vậy?

**gaukhunglong** · 28-02-2014, 03:37 PM

Gửi bởi hungthinhtho

Ứng dụng trên được dùng cho những phần mềm nào vậy?

Chú này hỏi chán thiệt , không biết vào box làm gì cơ chứ.Làm trong thiết kế web chứ sao ?
http://laptrinhviet.net/

**Linh Le** · 07-03-2014, 05:08 PM

Gửi bởi billsang

Là dân lập trình mà mê bẻ khóa quá ghê , chắc ông bạn thích cả hacker rồi .Mình không bàn luận về mặt phải - trái của việc bẻ khóa .Tuy nhiên nếu người ta đã cho dùng thử vô thời hạn .Chỉ hiện mỗi dòng quảng cáo bản quyền và địa chỉ thì ta bẻ quá có quá lắm không .Cứ thích made in của tui làm gì cơ chứ .

Bác cho em hỏi cái là cái này dùng thử được mãi mãi à??? Mình lên trang chủ tải về và cài đặt xong hết rồi nhưng còn băn khoăn mỗi cái vụ demo vì sợ đang dùng thì nó lăn ra chết. Hỏi thêm bác luôn là sao trong bài hướng dẫn trên bạn dùng skin gì của ckeditor vậy mình thử 3 cái skin đều thấy xấu mù, không đẹp như cái của bạn

**mphana** · 30-04-2016, 06:36 PM

Cái này dùng Demo có bị vấn đề gì không bạn.
Đang dùng nó có lăn đùng ra chết không ?
Chính sách Demo của nó là thế nào vậy?

Chủ đề: Hướng dẫn sử dụng thư viện CkFinder - Chèn ảnh trong CkEditor

Công cụ Chủ đề

Tìm Chủ đề

Hiển thị

Hướng dẫn sử dụng thư viện CkFinder - Chèn ảnh trong CkEditor

View more random threads:

Quyền viết bài

Bàn luận thông tin các điều kiêng...

How to make and tie a gift basket...

Phương pháp để quý cô sử dụng cu...

Tìm hiểu để biết máy rung tình yêu...

Các yếu tố phụ thuộc khi mua...