Upload hình ảnh trong ckeditor asp.net

3/13/2021 9:58 AM | Lập trình

Mình làm dự án và khách hàng yêu cầu thêm chức năng trong ckeditor. Nên cũng đọc, tìm kiếm share lại cho anh em có nhu cầu sử dụng nhé.

 


CKEditor và CKFinder hỗ trợ người dùng soạn thảo văn bản với đầy đủ những chức năng cần thiết giống phần mềm Microsoft Word. Ở bài này mình sẽ hướng dẫn bạn gắn 2 plugin này nhưng là cài đặt vào ứng dụng web ASP.NET MVC 5.
 

1. Cài đặt CKEditor

 
CKEditor là 1 plugin hỗ trợ người dùng soạn thảo văn bản trên website, điều đặc biệt là nó có nhiều package (gói) như Basic, Standard, Full, Customize bạn có thể xem chi tiết tại địa chỉ sau http://ckeditor.com/download. Trong bài viết này mình sẽ hướng dẫn bạn cài đặt gói Full với đầy đủ những chức năng để soạn thảo văn bản, với các gói khác thì cách làm cũng tương tự.
 
Bước 1: Truy cập địa chỉ http://ckeditor.com/download và click Download ở gói Full Package. 
 
Bước 2: Sau khi tải về bạn sẽ có được 1 file .zip. Tiến hành giải nén file này và sao chép thư mục ckeditor và dán vào thư mục gốc project của bạn. Kết quả được như hình dưới.
 
 
Bước 3: Trong view mà bạn muốn sử dụng ckeditor bạn cần khai báo đoạn script sau: 
<script  src="~/ckeditor/ckeditor.js"></script>
 
<script>
        CKEDITOR.replace("IDCuaTextArea");
</script>
 
Bạn thay IDCuaTextArea thành giá trị ID của tag <textarea></textarea> mà bạn muốn CKEditor sẽ ghi đè lên tag đó.
 
Ví dụ tôi có tag <textarea id="NoiDung" name="NoiDung" ></textarea> thì đoạn lệnh của tôi sẽ như sau
 
 
<script>
        CKEDITOR.replace("NoiDung");
</script>
 
Vậy là hoàn thành. Bạn thử kiểm tra xem có đạt kết quả như hình dưới đây không nhé.
 
 

2. Tích hợp CKFinder vào CKEditor

 
Dù gói FULL của CKEditor có khá nhiều chức năng nhưng nó còn thiếu 1 chức năng theo mình thấy là cực kỳ quan trọng đó là upload hình ảnh và tập tin từ máy tính người dùng vào bài viết. Để CKEditor hỗ trợ thêm chức năng ấy thì chúng ta cần phải tích hợp thêm CKFinder vào CKEditor. 
CKFinder thực chất là 1 add-on hay có thể hiểu là 1 tiện ích bổ sung thêm của CKEditor. 
 
Đối với CKFinder thì bạn phải trả phí để mua nếu không thì chỉ có thể xài được bản demo tuy nhiên bài viết này mình sẽ hướng dẫn bạn sử dụng tránh được việc mất phí nhưng vẫn sử dụng được bản đầy đủ của CKFinder bằng cách dùng Keygen.
 
Bước 1: Sau khi cài đặt CKEditor thành công bạn tiến hành truy cập địa chỉ https://cksource.com/ckfinder, sau đó click tab "Free trial" và và click vào hình Microsoft ASP.net.
 
 
 
Bước 2: Tại tab này bạn kéo xuống tải file zip for ASP.NET của CKFinder version 2.6.2.1 
 
 
 
Bước 3: Sau khi tải file .zip về bạn tiến hành giải nén và sao chép thư mục ckfinder sau đó dán vào thư mục gốc project của bạn. Kết quả sẽ được như hình dưới.
 

Tiếp theo bạn sao chép toàn bộ file trong thư mục ckfinder/bin/Debug vào thư mục bin ở project của bạn nhé.

Bước 4: Mở file config.ascx trong thư mục ckfinder ở project. Thay lệnh return false; thành return true; trong method CheckAuthentication()

Sau đó tìm đến method SetConfig() bạn sẽ thấy có 2 thuộc tính LicenseName và LicenseKey đây là 2 thuộc tính để xác định bản quyền của CKFinder. Bạn thay thế 2 dòng lệnh đó bằng 2 dòng sau:

LicenseName = "@truongson";
LicenseKey = "AUKPSE6XSVSJTP4MSV9RQKJBKGLL3KN7";

 
 

Còn nữa, phía dưới 2 thuộc tính LicenseName và LicenseKey là thuộc tính BaseUrl. Thuộc tính này chỉ định nơi các chứa file mà người dùng upload. Bạn có thể thay đổi theo ý mình. Giả sử nếu tôi muốn lưu vào thư mục Photos ở thư mục gốc của project thì tôi sửa giá trị thành "/Photos/".

Bước 5: Tại view, bạn khai báo thêm thẻ script sau <script type="text/javascript" src="~/ckfinder/ckfinder.js"></scriptvà bổ sung lệnh CKFinder.setupCKEditor(null,'/ckfinder'); dưới lệnh CKEDITOR.replace("IDTextArea");

Thông qua 5 bước trên là bạn đã hoàn thành tích hợp thêm add-on CKFinder vào CKEditor rồi đó. Cách upload hình ảnh rất đơn giản thôi, bạn click vào button Image trên CKEditor sau đó chọn tab Tải lên để chọn file cần upload và thực hiện upload lên server.
 
 
 
Giả sử sau này bạn muốn dùng lại file đã upload trước đó thì có thể click button "Duyệt máy chủ" để lấy những file đã upload trước đó.
 
 
 
Chú ý: nếu khi build website mà bị lỗi liên quan đến 2 plugin này thì bạn hãy exclude 2 folder ckeditor và ckfinder khỏi project chứ ko cần include vào project nhé.

Chúc bạn thành công.
 
 
Nguồn: laptrinhmois.blogspot.com
 

Tin tức khác

  • Design pattern là gì? Tại sao nên sử dụng Design pattern?

    Design pattern là gì? Tại sao nên sử dụng Design pattern?

    Design pattern là các giải pháp tổng thể đã được tối ưu hóa, được tái sử dụng cho các vấn đề phổ biến trong thiết kế phần mềm mà chúng ta thường gặp phải hàng ngày. Đây là tập các giải pháp đã được suy nghĩ, đã giải quyết trong tình huống cụ thể.

  • CDN là gì? Khi nào thì cần xài CDN cho website

    CDN là gì? Khi nào thì cần xài CDN cho website

    Thuật ngữ CDN có thể bạn sẽ bắt gặp khá nhiều bài viết trên thachpham.com, hoặc khi bạn cần một người có kinh nghiệm tư vấn giải pháp tiết kiệm băng thông máy chủ và tăng tốc độ website đều sẽ được nghe tư vấn là sử dụng CDN. Vậy CDN chính xác là cái gì, có bao nhiêu loại CDN, và website của bạn có thích hợp để sử dụng CDN không thì bài này sẽ cung cấp cho bạn các thông tin cần thiết đó.

  • Giao thức HTTP và HTTPS là gì? Tại sao nên sử dụng HTTPS?

    Giao thức HTTP và HTTPS là gì? Tại sao nên sử dụng HTTPS?

    Môi trường internet phát triển, kéo theo tội phạm mạng tăng cao, vì thế cần có những chuẩn bảo mật web cao hơn. Đó là lí do giao thức HTTPS dần thay thế hoàn toàn HTTP. Vậy, giao thức HTTPS là gì? HTTP và HTTPS khác nhau như thế nào? Và tại sao các website nên dùng HTTPS thay vì HTTP? Bài viết này sẽ giúp bạn giải đáp tất cả những thắc mắc đó.

  • Tích hợp zalo vào website.

    Tích hợp zalo vào website.

    Nếu bạn là một người có website bán hàng thì việc liên hệ thuận lợi nhanh cho khách hàng luôn là ưu tiên hàng đầu. Cũng chính vì lí dó này mình đã tìm hiểu sau khi chèn cho website của mình. Thấy hay nên chia sẻ cho mọi người có nhu cầu.

  • Cách dựng 1 website bằng iis.

    Cách dựng 1 website bằng iis.

    Có rất nhiều bạn làm web nhưng lại không biết cách build 1 site trên iis. Nên hôm nay mình sẽ chia sẻ các bước đơn giản để có thể dễ dàng tạo được 1 trang web bằng iis trên  server windows.

  • Build site PHP trên server windows.

    Build site PHP trên server windows.

    Mình đang quản trị các website asp.net nên việc build một website wordpress lên vps của mình gặp rất nhiều khó khăn. Và mình hỏi còn gặp những ý kiến như không thể build php và asp.net trên cùng một môi trường. Nhưng hôm nay mình đã làm được và chia sẻ lại cho mọi người. Nếu vẫn gặp khó khăn thì inbox cho mình nha. Thông tin nằm ở footer trang web.