SỬ DỤNG CKEDITOR VÀO ỨNG DỤNG ASP .NET MVC
1. Giới thiệu và cài đặt
CKEditor là một text editor sử dụng trong các trang web.
Thực chất hiển thị được những định dạng văn bản thế này đều là nhờ vào việc lưu dưới dạng HTML.
Download Gói CKEditor (~7MB) : http://download.cksource.com/CKEditor/CKEditor/CKEditor%203.6.3/ckeditor_3.6.3.zip
Giải nén ra để vào kho tài liệu của mình. (Coi như bản gốc)
Giờ chúng ta cần sử dụng CKEditor trong web của chúng ta, chỉ việc copy nguyên folder đó vào project
Sau đó, để project nhẹ bớt thì xóa đi 1 số file không cần thiết. Ở đây tôi chỉ muốn sử dụng javascript đơn giản nên tôi sẽ loại bỏ những file sau:
- CHANGES.html
- INSTALL.html
- ckeditor.pack
- ckeditor_basic.js
- ckeditor_basic_source.js
- Các file có đuôi .asp và .php
- Cả thư mục _source
Chưa hết đâu, còn 1 thứ để loại bỏ nữa, mà khoan bỏ nha, đó là folder _samples. Folder này chứa các ví dụ về CKEditor, chúng ta sẽ dùng những trang này để test xem là có thể chạy chưa. Bằng cách chạy project và truy cập đường dẫn đến đường dẫn sau (port và folder chứa nó là tùy thuộc vào bạn).
Nếu chạy ra được ckeditor như thế:
Gõ gõ và Edit vài chữ trên đó thử. Nếu được thì coi như chúng ta đã thành công.
Cụ thể cách sử dụng CKEditor trong lập trình web thì chúng ta sẽ cùng làm một ví dụ nho nhỏ ở mục sau.
2. Sử dụng
Tôi sẽ demo cách sử dụng CKEditor khi lập trình web qua 1 ví dụ ngắn gọn. Vì mục tiêu của bài viết này là hướng đến sử dụng CKEditor nên tôi sẽ lướt nhanh những phần không quan trọng.
Tôi sẽ tạo một project ASP.NET MVC 3 với tên là DemoCKEditor. Tôi sử dụng ngôn ngữ C# và cú pháp Razor. Nội dung của web này là dùng để quản lý các bài viết trên blog cá nhân.
Đầu tiên tôi sẽ tạo 1 cơ sở dữ liệu trong Sql Server, cơ sở dữ liệu MyBlog chỉ có 1 bảng duy nhất như sau:
create table Post
(
PostId int primary key identity,
Title text,
Content ntext
)
Rồi từ đó tôi tạo ADO.NET Entity Data Model được thế này:
Chạy thử sẽ thấy với view Create sẽ có giao diện như sau:
Chúng ta biết rằng một bài post trên blog thì nội dung đâu thể gói gọn trong 1 dòng text đơn giản. Để có thể nhập vào nội dung có thể định dạng thì chúng ta sẽ sử dụng CKEditor.
Đến đây, chúng ta thực hiện copy gói ckeditor vào project như mục 1 của bài viết đã hướng dẫn.
(Thư mục Plugin là thư mục tôi tự tạo)
Sau khi đã cài đặt, chúng ta vào _layout.cshtml add reference đến file ckeditor.js
Chúng ta sẽ mở View Create. Chúng ta tìm đến đoạn:
@Html.EditorFor(model => model.Content)
@Html.ValidationMessageFor(model => model.Content)
Thay bằng:
@Html.TextAreaFor(model => model.Content, new { @id = “ckeContent” })
CKEDITOR.replace(“ckeContent”);
Thật dễ hiểu đúng không, trước tiên cho hiển thị lên như một textarea, đặt lại id cho nó. Hàm replace trong đoạn script sẽ thay textarea hoặc div trong tham số truyền vào bằng 1 CKEditor.
Thế là ta dễ dàng có được:
Thử tạo mới một Post xem thế nào. Nhập 1 tí rồi bấm nút Create thử. Nhưng kết quả sẽ ra:
Vấn đề nằm ở chỗ khi ta tạo mới một Post như thế, dữ liệu content của nó không còn là text thuần túy mà đây là HTML, .NET nhận ra và báo đây là điều nguy hiểm đối với chúng ta trong vấn đề bảo mật. Để tắt cơ chế bảo mật này đi. Chúng ta vào trong lớp Controller, đến ngay phương thức Create mà có HttpPost. Thêm vào [ValidateInput(false)]. Đây là phương thức Create sau khi thêm:
[HttpPost]
[ValidateInput(false)]
public ActionResult Create(Post post)
{
if (ModelState.IsValid)
{
db.Posts.AddObject(post);
db.SaveChanges();
return RedirectToAction(“Index”);
}
return View(post);
}
Rồi bây giờ chạy lại thì có thể thêm được thành công:
Nhìn vào những thẻ HTML thế này thì chắc các bạn cũng đã hình dung được ban nãy khi tạo tôi định dạng nội dung Content như thế nào rồi đúng không!
Tương tự như thế làm cho View Edit. Thực hiện xong, chúng ta chạy lại lên và Edit bài Post ban nãy vừa tạo:
Chúng ta thấy rõ là lúc này CKEditor đã thể hiện lại các HTML .
Còn 1 vấn đề nữa. Ban nãy chúng ta thấy trang Index hiển thị chuỗi HTML. Những HTML này đã được encode bởi MVC. Mặc định khi xuất ra chuỗi thì MVC sẽ encode trước khi hiển thị.
Vậy bây giờ, ngược lại ta muốn xuất ra nội dung chưa được encode thì thế nào?
Lớp HttpHelper cung cấp cho chúng ta phương thức Raw để làm việc đó.
Và bây giờ chúng ta có thể áp dụng vào View Details.
Trước đây, Details là thế này:
Để được thế này:
Thì chỉ việc thay
@Html.DisplayFor(model => model.Content)
Bằng
@Html.Raw(Model.Content)
3. Tóm tắt
Khi làm viêc với CKEditor cần chú ý những điều sau:
- Test bằng các trang web sample trước khi sử dụng
- Sử dụng textarea hoặc div để tạo ra CKEditor
- Xử lý bỏ qua phần kiểm tra thông tin tại các Action nhận thông tin từ người dùng.
- Bản chất định dạng bằng HTML và mặc định MVC sẽ xuất ra dạng chuỗi đã được encode
Bạn đang muốn tìm kiếm 1 công việc với mức thu nhập cao.
✅ Hoặc là bạn đang muốn chuyển đổi công việc mà chưa biết theo học ngành nghề gì cho tốt.
✅ Giới thiệu với bạn Chương trình đào tạo nhân sự dài hạn trong 12 tháng với những điều đặc biệt mà chỉ có tại IMIC và đây cũng chính là sự lựa chọn phù hợp nhất dành cho bạn:
👉 Thứ nhất: Học viên được đào tạo bài bản kỹ năng, kiến thức chuyên môn lý thuyết, thực hành, thực chiến nhiều dự án và chia sẻ những kinh nghiệm thực tế từ Chuyên gia có nhiều năm kinh nghiệm dự án cũng như tâm huyết truyền nghề.
👉 Thứ hai: Được ký hợp đồng cam kết chất lượng đào tạo cũng như mức lương sau tốt nghiệp và đi làm tại các đối tác tuyển dụng của IMIC. Trả lại học phí nếu không đúng những gì đã ký kết.
👉 Thứ ba: Cam kết hỗ trợ giới thiệu công việc sang đối tác tuyển dụng trong vòng 10 năm liên tục.
👉 Thứ tư: Được hỗ trợ tài chính với mức lãi suất 0 đồng qua ngân hàng VIB Bank.
👉 Có 4 Chương trình đào tạo nhân sự dài hạn dành cho bạn lựa chọn theo học. Gồm có:
1) Data Scientist full-stack
2) Embedded System & IoT development full-stack
3) Game development full-stack
4) Web development full-stack
✅ Cảm ơn bạn đã dành thời gian lắng nghe những chia sẻ của mình. Và tuyệt vời hơn nữa nếu IMIC được góp phần vào sự thành công của bạn.
✅ Hãy liên hệ ngay với Phòng tư vấn tuyển sinh để được hỗ trợ về thủ tục nhập học.
✅ Chúc bạn luôn có nhiều sức khỏe và thành công!