CKEditor – CKFinder đã cấu hình

Link download CKEditor – CKFinder đã cấu hình, copy paste sau đó tích hợp vào ứng dụng web.

Tải CKFinder

Tải CKEditor

Dưới đây là mã nguồn Image Manager ImageManager

 

Advertisements

File manager with CKFinder

File manager with CKFinder – Quản lý file với CKFinder

Các bước dưới đây hướng dẫn sử dụng CKFinder để quản lý và upload file với ASP.NET MVC

  • Download CKFinder và chép vào thư mục gốc của website
  • Trước thẻ </body> của trang _Layout.cshtml chèn thêm đoạn mã sau
ckfinder3
  •  Trong view cần dùng CKFinder để chèn ảnh, upload ảnh bổ sung đoạn mã sau
<input id="xFilePath" name="FilePath" type="text" class="input-block-level" />
<input type="button" value="Browse Server" onclick="BrowseServer();" class="controls" />

Lưu ý ID của điều khiển tương ứng với tên sử dụng trong phương thứ SetFileField(..)

Sau khi chạy kết quả hiển thị như hình sau

ckfinder1

Khi người dùng click nút Browse Server, màn hình như ảnh sau

ckfinder2

Integrate CKEditor and CKFinder

Bài viết dưới đây hướng dẫn cách tích hợp CKEditor và CKFinder trong ASP.NET MVC. Các bước thực hiện:

  1. Download CKEditor ở địa chỉ CKEditor 4.5.11
  2. Download CKFinder ở địa chỉ CKFinder
  3. Giải nén và copy 2 thư mục CKEditor và CKFinder vào trong thư mục gốc của website, ví dụ cấu trúc ứng dụng web là CMS thì 2 thư mục CKEditor và CKFinder sẽ là (nhớ xóa hết các file source của ckedit và ckfinder):
    • CMS\ckeditor
    • CMS\ckfinder
  4. Chèn scripts vào View cần tạo CKeditor và CKFinder

@section scripts
{
http://~/ckeditor/ckeditor.js
http://~/ckfinder/ckfinder.js
}

5. Chèn CKeditor vào View như sau

@Html.LabelFor(model => model.Content, htmlAttributes: new { @class = “control-label col-md-2” })

@Html.TextAreaFor(model => model.Content, new { htmlAttributes = new { @class = “form-control” } })
@Html.ValidationMessageFor(model => model.Content, “”, new { @class = “text-danger” })

</div>

6. Bổ sung script để tạo CKeditor và tích hợp CKFinder

var editor = CKEDITOR.replace(‘Content’); //Tạo CKEditor
CKFinder.setupCKEditor(editor, ‘/ckfinder/’);//Tích hợp CKFinder