Hướng Dẫn Tích Hợp Trình Soạn Thảo CKEditor Vào ASP.NET MVC

Trang chủ » Sử Dụng Ckeditor Trong Asp.net Mvc » Hướng Dẫn Tích Hợp Trình Soạn Thảo CKEditor Vào ASP.NET MVC

Có thể bạn quan tâm

Chuyển đến nội dung chính

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

tháng 10 17, 2020

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.Giao diện trình soạn thảo CKEditorHô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ác gói tuỳ chọn của trình soạn thảo CKEditorCó 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 scriptvà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.Cấu trúc dự án ASP.NET MVC của mìnhBướ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 đó.Thêm đường dẫn file ckeditor.js vào ViewBước 4: Sử dụng đoạn script bên dưới để thay thế TextArea bằng CKEditor.Script thay thế TextArea bằng trình soạn thảo CKEditor“Detail” chính là thuộc tính id của TextArea.“Detail” chính là thuộc tính id của TextAreaBạn có thể kiếm tra id bằng cách kiểm tra element trên trình duyệt web.Cách kiểm tra id của TextArea bằng trình duyệtBước 5: Lưu thay đổi và chạy ứng dụng của bạn để xem kết quả.Kết quả sau khi tích hợp trình soạn thảo CKEditor

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 CKEditorvà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. ASP.NET MVC CKEditor trình soạn thảo

Nhận xét

Đăng nhận xét

Lộc Đẹp Trai Truy cập hồ sơ

Lưu trữ

  • tháng 10 20201

Nhãn

  • ASP.NET MVC
  • CKEditor
  • trình soạn thảo

Báo cáo vi phạm

Từ khóa » Sử Dụng Ckeditor Trong Asp.net Mvc