Ở bài viết này mình sẽ hướng dẫn bạn tích hợp CKEditor (gói FULL hoặc STANDARD) vào project ASP.NET sau đó hướng dẫn bạn tích hợp luôn CKFinder vào project để sử dụng thêm chức năng upload images, file ...
I. Tích hợp CKEditor vào project
Bước 1: Truy cập http://ckeditor.com/download chọn gói CKEditor bạn muốn (FULL hoặc STANDARD) và click Download. Ở bài viết này mình sẽ tải bản FULL luôn. Hai gói này hoàn toàn miễn phí nên bạn thoải mái download không lo sợ vấn đề gì nhé.
Bước 2: Giải nén file vừa tải về sau đó copy thư mục ckeditor và paste vào project của bạn.
 |
| Copy thư mục |
 |
| Paste vào project của bạn |
Bước 3: Bạn cần tải thêm gói CKEditor for ASP.NET được tìm thấy bên dưới trang http://ckeditor.com/download
Bước 4: Giải nén file vừa tải và truy cập vào thư mục bin/Debug bạn sẽ thấy có 2 file CKEditor.NET.dll và CKEditor.NET.pdb. Bây giờ bạn add references file CKEditor.NET.dll vào project theo các hình bên dưới
 |
| Click phải vào References và chọn Add Reference |
 |
| Click Browse |
 |
| Chọn file CKEditor.NET.dll và click Add |
Bước 5: Mở trang web bạn muốn hiện CKEditor và khai báo ở đầu trang namespace CKEditor.NET để sử dụng CKEditor bằng lệnh <%@ Register Namespace="CKEditor.NET" Assembly="CKEditor.NET" TagPrefix="CKEditor" %> .
Sau đó đặt lệnh <CKEditor:CKEditorControl ID="CKEditor1" Height="500" runat="server"></CKEditor:CKEditorControl> vào chỗ nào bạn muốn CKEditor hiện lên.
Phía dưới là hình minh hoạ cho trang DemoCKEditor.aspx của mình
Bước 6: Build lại project và chạy thử trang web của bạn để xem kết quả có hiện được CKEditor như mình không nhé.
II. Tích hợp CKFinder vào project
CKEditor đã có rất nhiều những tính năng hay để bạn soạn thảo văn bản như tô đen, in nghiêng, gạch chân, dán link, soạn theo mẫu sẵn có, tạo form, ... tuy nhiên nó còn thiếu chức năng rất quan trọng là upload image.
Muốn sử dụng thêm chức năng upload image thì chúng ta phải tích hợp thêm CKFinder. Các bước làm như sau.
Bước 1: Tải bản CKFinder với version là 2.6.2.1 tại địa chỉ https://download.cksource.com/CKFinder/CKFinder%20for%20ASP.NET/2.6.2/ckfinder_aspnet_2.6.2.zip
Bước 2: Giải nén file sau đó copy thư mục ckfinder và paste vào project của bạn.
Bước 3: Add reference file CKFinder.dll trong thư mục ckfinder/bin/Debug (cách làm như đối với phần I)
Bước 4: Mở file config.acsx trong thư mục ckfinder tại project của bạn. Bạn sẽ thấy có 2 method là CheckAuthentication() và SetConfig() trong file này (xem hình dưới)
Bước 5: Thay lệnh return false; thành return true; trong method CheckAuthentication()
Bước 6: Gán thuộc tính LicenseName = "@tuannguyen"; và LicenseKey = "AUKPSE6XSVSJTP4MSV9RQKJBKGLL3KN7"; hoặc bạn cũng có thể tự sinh ra CKFinder Keygen bằng cách truy cập vào link sau https://huytq.me/tools/ckfinder-keygen.html
Bước này là thủ thuật đấy vì CKFinder phải mất phí đó nhé :v
Bước 7: Mặc định CKFinder sẽ upload các file vào thư mục /ckfinder/userfiles/ thông qua lệnh BaseUrl = "/ckfinder/userfiles/"; Nếu bạn muốn upload vào thư mục khác thì bạn sửa lại giá trị thuộc tính BaseUrl nhé.
Bước 8: Bây giờ chúng ta cùng gắn CKFinder vào trang web nhé.
Đầu tiên là khai báo namespace CKFinder bằng lệnh sau <%@ Register Namespace="CKFinder" Assembly="CKFinder" TagPrefix="CKFinder" %>
Tiếp theo là dán lệnh <CKFinder:FileBrowser ID="FileBrowser1" Width="0" runat="server" OnLoad="FileBrowser1_Load"></CKFinder:FileBrowser> ở bất cứ đâu trong trang.
Bước 9: View code behind của trang lên và thêm method FileBrowser1_Load như hình:
protected void FileBrowser1_Load(object sender, EventArgs e)
{
FileBrowser1 = new CKFinder.FileBrowser();
FileBrowser1.BasePath = "/ckfinder/";
FileBrowser1.SetupCKEditor(CKEditor1);
}
Bước 10: Build project và tải lại trang web.
Vậy là đã hoàn thành thêm việc tích hợp CKFinder. Mình giới thiệu thêm về tính năng upload của CKFinder (hiện giờ nó đang nằm luôn trong CKEditor, cả 2 hoà hợp là 1 luôn ^^).
Để thêm hình vào bài viết thì bạn chọn icon Image trong CKEditor và chọn tab Tải lên sau đó chọn file hình ảnh muốn upload và click button Tải lên máy chủ.
Khi bạn click vào button Duyệt máy chủ ở tab đầu tiên thì bạn sẽ thấy danh sách các hình mà bạn đã upload lên máy chủ trước đó, bạn có thể chọn hình và dán vào bài viết luôn thay vì upload lại hình đó nữa.
Hình dưới cho thấy mình đã upload khá nhiều hình rồi và những hình này được chứa trong thư mục mà mình đã khai báo ở thuộc tính BaseUrl trong bước 6.
Bài viết đến đây là hết. Chúc bạn thành công. Mọi thắc mắc bạn comment bên dưới bài viết để mình hỗ trợ nhé.
EmoticonEmoticon