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:
Không chỉ dừng lại ở việc sử dụng nguyên liệu cao cấp, mỗi công trình còn được "chăm sóc" bằng 4 dịch vụ xuất sắc của Tre Nghệ. Từ việc tư vấn, thiết kế đến thi công và hoàn thiện, mọi quy trình đều...
Chất Lượng và Sáng Tạo: Kiến Trúc...