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é.

29-08-2022 Remote SQL Server. Cách mở port 1433 để kết nối với sqlserver từ xa.
09-11-2023 Tạo chatbot với CHAT GPT sử dụng C#
04-11-2024 Lợi ích của việc xài react hook form thay vì validate function

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:

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

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"></script> và 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.

Bài viết liên quan: Các trình soạn thảo văn bản phổ biến dùng cho giao diện quản lý website (tindiachan.com)

Nguồn: laptrinhmois.blogspot.com

Tin tức khác

Lợi ích của việc xài react hook form thay vì validate function

Lập trình

Sử dụng React Hook Form thay vì tự viết các hàm validate thủ công mang lại nhiều lợi ích, đặc biệt trong việc quản lý form trong ứng dụng React. Dưới đây là một số lợi ích chính của React Hook Form:
Tạo chatbot với CHAT GPT sử dụng C#

Lập trình

Trong hướng dẫn này, chúng ta sẽ đi sâu vào quá trình xây dựng chatbot bằng ChatGPT và C#. Chúng tôi sẽ đề cập đến mọi thứ, từ thiết lập quyền truy cập API ChatGPT đến triển khai chatbot của bạn. Bắt đầu nào!
Remote SQL Server. Cách mở port 1433 để kết nối với sqlserver từ xa.

Lập trình

Hiện nay nhiều người có xây dựng cơ sở dữ liệu trên server và kết nối tới để làm việc cho tiện. Nên mình chia sẻ bài viết này cho người mới nhé.
Sự khác nhau giữa Application, Virtual Direction và Site. Cách tạo 1 Virtual Direction.

Lập trình

Trong IIS, bạn có thể tạo các trang web, ứng dụng và thư mục ảo để chia sẻ thông tin với người dùng qua Internet, mạng nội bộ hoặc mạng phụ. Mặc dù các khái niệm này đã tồn tại trong các phiên bản trước của IIS, một số thay đổi trong IIS 7 trở lên ảnh hưởng đến định nghĩa và chức năng của các khái niệm này. Quan trọng nhất, các trang web, ứng dụng và thư mục ảo giờ đây hoạt động cùng nhau theo mối quan hệ phân cấp như những khối xây dựng cơ bản để lưu trữ nội dung trực tuyến và cung cấp dịch vụ trực tuyến.
Design pattern là gì? Tại sao nên sử dụng Design pattern?

Lập trình

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

Lập trình

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?

Lập trình

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 đó.