Sử dụng CKEditor vào ứng dụng ASP .NET MVC 3

Sử dụng CKEditor vào ứng dụng ASP .NET MVC 3

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

Ở đây tôi lưu cả folder ckeditor trong 1 folder Plugin và sử dụng port 6047 khi chạy.

http://localhost:6047/Plugin/ckeditor/_samples/replacebyclass.html

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:

Tận dụng sức mạnh của ASP.NET MVC Framework, tôi sẽ cho nó tự động sinh ra lớp Controller và các lớp View.(Cách sinh tự động có thể tham khảo tại đây) Vậy là ta có 1 website đơn giản.

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

    <script src=”../../Plugin/ckeditor/ckeditor.js” type=”text/javascript”></script>

</head>

 

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” })

            <script type=”text/javascript”>

                CKEDITOR.replace(“ckeContent”);

            </script>

 

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

Nếu bạn quan tâm CKEditor ở ASP.NET Core thì xem bài viết này tiếp nhé: https://vkhangyang.wordpress.com/2016/12/31/su-dung-ckeditor-vao-ung-dung-asp-net-core/

Khang