Trình soạn thảo nội dung là thứ không thể thiếu với phần lớn các website ( Do ngoài việc soạn thảo nội dung chúng ta cần định dạng nội dung và hiển thị các nội dung mà đối tượng texArea của html không thể làm nổi ) .Có rất nhiều thư viện mã nguồn mở hỗ trợ xây dựn trình soạn thảo trên web như : CkEditor , TinyMCE , markitup .Trong hướng dẫn này chúng tôi sẽ hướng dẫn sử dụng thư viện CKEditor rất phổ biến từ việc sử dụng trong HTML tĩnh tới trong ứng dụng MVC để các bạn có thể tùy biến sử dụng trong mọi môi trường phát triển khác nhau từ webform , mvc , php ...

Download mã nguồn hướng dẫn Tại Đây


- Các bạn có thể download thư viện cũng như hướng dẫn sử dụng thư viện CKEditor tại trang chủ của CKEditor : http://ckeditor.com/
- Trên trang chủ có đầy đủ các hướng dẫn từ việc sử dụng ckeditor thuần trong html tới việc sử dụng trong các ứng dụng asp.net , php
- CKEditor có hỗ trợ Tiếng Việt
- Một tính năng quan trọng của CKEditor nữa đó là cho phép tích hợp các plugin hỗ trợ ( các bạn có thể tự code plugin cho riêng mình hoặc download các plugin do công đồng phát triển )
- Có rất nhiều Plugin hữu ích do cộng đồng phát triển cho CKEditor như : hỗ trợ gõ công thức toán học , hiển thị tô sáng các mã nguồn ... các bạn có thể download thêm plugin từ địa chỉ : http://ckeditor.com/addons/plugins/all

1. Cấu hình thư viện CKEditor :

- cấu hình thêm code sau trong file Config.js của thư viên CkEditor
// cấu hình ngôn ngữ tiếng việt
config.language = 'vi';
config.enterMode = CKEDITOR.ENTER_BR;
// bỏ thẻ p mỗi khi nhập liệu ckeditor

- Ở đây ta có 2 cấu hình cơ bản là cấu hình Tiếng Việt và thẻ p khi nhập liệu nội dung cho trong CKEditor
- Sau này chúng ta sẽ làm quen nhiều cấu hình như tích hợp CKFinder vào CKEditor , tích hợp Plugin , phân quyền .Mọi cấu hình cũng khai báo code ở đây

2. Sử dụng CKEditor trong HTML thuần

- Nguyên tắc chung là ta khi báo 1 thẻ textArea trong html , sau đó chỉ định id hoặc class để thư viện CKEditor định dạng cho textArea
Định dạng textArea dùng thuộc tính class :
- khai báo thư viện CKEditor .Các bạn download thư viện CkEditor về rồi khai báo tham chiếu trong file html cần định dạng CkEditor như sau :

<script src="ckeditor/ckeditor.js"></script>

- Mã HTML tạo textArea (chú ý cần khai báo thuộc tính id cho textarea) :

<textarea id="ckeditor1" />

- Code toàn bộ file html như sau :
Mã:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="ckeditor/ckeditor.js"></script>
</head>
<body>
    <textarea id="ckeditor1" />
</body>
</html>
Định dạng textArea dùng thuộc tính id
- Với định dạng ở trên thì tất cả các textarea có class là ckeditor đều được định dạng bằng ckeditor .
- Trong 1 vài trường hợp ta cỉ muốn trường chỉ định nào đó được định dạng bằng textarea .Để làm điều này ta dùng thuộc tính id của tag html , đồng thời dùng jQuery để chỉ định id được định dạng bằng ckeditor
- Ta có mã như sau ( chú ý là cần tham chiếu tới thư viện jQuery
Mã:
<script src="../Scripts/jquery-1.7.1.min.js"></script>
    <script src="/ckeditor/ckeditor.js"></script>
    <script type="text/javascript">
        $(function () {
            CKEDITOR.replace('textarea1');
        })
    </script>
<textarea id="textarea1"></textarea>
Các bạn download mã nguồn về mở file CkEditorClass , CkEditorId (trong thư mục CkEditorInHTML) để xem toàn bộ code , và chạy thử ta được kết quả như hình sau :


3. Sử dụng CKEditor trong MVC
- Từ html tới View trong MVC là một con đường ngắn và hoàn toàn tương tự nhau
- Ở đây chúng tôi giới thiệu 1 tính năng Model Template trong MVC .Tính năng này dùng để chỉ định 1 template nào để hiển thị 1 thuộc tính của Model
Bước 1 : Tạo template sử dụng thư viện CKEditor
- Ta tạo 1 PartialView có tên là CkEdior.cshtml trong thư mục View/Shared/EditorTemplates/CkEditor của Project MVC
- Mã PartialView CkEditor.cshtml như sau :
Mã:
@model string
 <script src="../../../Scripts/ckeditor/ckeditor.js" type="text/javascript"></script>         
<script type="text/javascript">
    $(document).ready(function () {
        CKEDITOR.replace('ckeditor');
    });  
</script>
@Html.TextArea("", new { @class = "ckeditor" })
- Việc tạo mã Template tương tự như tạo 1 textArea rồi thay thế hiển thị bằng thư viện CkEditor như trng html ở phần trước
Bước 2 : Sử dụng Template CkEditor

- Giả sử ta có bảng TinTuc ( tin tức ) có trường Nội dung muốn hiển thị bằng CkEditor ta khai báo lớp TinTuc như sau :
Mã:
public class TinTuc
    {
        [UIHint("CkEditor"),Column(TypeName = "ntext"),MaxLength]        
        public string NoiDung { get; set; }
    }
- Ta khai báo sử dụng template CkEditor thông qua Attribute UIHint , và các Attribute Column , MaxLength để định dạng trường dữ liệu dưới CSDL là ntext
- Khi này khi Edit trường NoiDung của lớp TinTuc thì thẻ input được định dạng bằng template CKEditor
- Các bạn có thể xem mã nguồn trong file mã nguồn download về ( trong thư mục CkEditorMVC4)
Để mở được mã nguồn CKEditorMVC4 các bạn cần cài VisualStudio 2012 ( hoặc VS 2010 sp1 )
- Chạy ứng dụng MVC ( HomeController được gọi ) và được kết quả như hình sau :


Để chèn hình ảnh khi soạn thảo trong CkEditor bạn cần dùng thêm thư viện CkFinder , xem hứong dẫn Tại Đây