Hướng dẫn tích hợp trình soạn thảo CKEditor vào ASP.NET MVC

Trình soạn thảo CKEditor là gì?

Trình soạn thảo CKEditor là một trình soạn thảo văn bản mã nguồn mở theo kiểu WYSIWYG (tay làm – mắt thấy) của CKSource. Chương trình này có thể tích hợp vào các website mà không cần cài đặt. Phiên bản đầu tiên được phát hành năm 2003 và đến nay được rất nhiều người sử dụng.

Hôm nay Locdeptrai sẽ hướng dẫn các bạn tích hợp trình soạn thảo CKEditor vào dự án ASP.NET MVC của mình. Cùng bắt đầu thôi nào.

Tích hợp trình soạn thảo CKEditor vào dự án ASP.NET MVC

Bước 1: Download CKEditor tại https://ckeditor.com/ckeditor-4/download/

Có nhiều phiên và số lượng tính năng phụ thuộc vào phiên bản mà bạn chọn (Basic Package, Standard Package, Full Package) hoặc bạn có thể tuỳ chỉnh những tính năng mà mình muốn bằng cách chọn Customize. Hoặc bạn có thể tích hợp CKEditor bằng cách chèn đoạn script vào dự án ASP.NET MVC của mình mà không cần download bất cứ gì.

<script src="//cdn.ckeditor.com/4.15.0/standard/ckeditor.js"></script>

Bước 2: Giải nén file vừa download và copy toàn bộ file vừa giải nén vào dự án của bạn. Ở đây do mình đang thiết kế trang giao diện admin nên có cấu trúc giống như hình dưới đây.

Bước 3: Thêm đường dẫn của file ckeditor.js vào View của bạn, do trong dự án của mình tạo một layout để tất cả các View khác sử dụng nên mình chỉ cần thêm đường dẫn file vào đó.

Bước 4: Sử dụng đoạn script bên dưới để thay thế TextArea bằng CKEditor.

“Detail” chính là thuộc tính id của TextArea.

Bạn có thể kiếm tra id bằng cách kiểm tra element trên trình duyệt web.

Bước 5: Lưu thay đổi và chạy ứng dụng của bạn để xem kết quả.

Tổng kết

Trên đây Locdeptrai đã hướng dẫn các bạn cách để tích hợp trình soạn thảo CKEditor vào dự án ASP.NET MVC của mình. Qua bài viết này mình hy vọng giúp đỡ được phần nào các bạn mới đang tìm hiểu về lập trình. Nếu có bất kỳ thắc mắc nào liên quan đến bài viết thì các bạn hãy bình luận dưới bài viết để mình có thể hỗ trợ. Chúc các bạn thành công.