CKEditor cho ASP.NET

CKEditor (còn gọi là FCKeditor) là một trình soạn thảo 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 web site 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 mình xin giới thiệu cách cài cho những bạn nào chưa biết về editor này.

Đầu tiên bạn hãy vào trang http://ckeditor.com/ để tìm version phù hợp. Ở đây chúng ta sẽ download bản dành cho ASP.NET. Sau khi download xong bạn hãy copy thư mục ckeditor paste vào thư mục gốc của web và sau đó thì copy CKEditor.NET.dll vào trong thư mục Bin nếu không bạn có thể Add Reference tới dll này.

Tiếp theo thêm dòng code đăng kí sử dụng ckeditor vào trang mà bạn muốn dùng:

<%@Register Assembly="CKEditor.NET" Namespace="CKEditor.NET" TagPrefix="CKEditor"%>

Sau đó chèn đoạn code để hiển thị CKEditor vào:

<CKEditor:CKEditorControl ID="CKEditor1" runat="server"></CKEditor:CKEditorControl>

Sau khi chạy trang này chúng ta sẽ có giao diện như sau:

Các bạn có thể tùy chỉnh giao diện toolbar của ckeditor. Các bạn vào behind code và tùy chỉnh.

Nếu là full toolbar thì sẽ có dạng code như sau( đây là mặc không cần gõ mình chỉ ví dụ thôi)

CKEditor1.config.toolbar = new object[]
{
    new object[] { "Source", "-", "Save", "NewPage", "Preview", "-", "Templates" },
    new object[] { "Cut", "Copy", "Paste", "PasteText", "PasteFromWord", "-", "Print", "SpellChecker", "Scayt" },
    new object[] { "Undo", "Redo", "-", "Find", "Replace", "-", "SelectAll", "RemoveFormat" },
    new object[] { "Form", "Checkbox", "Radio", "TextField", "Textarea", "Select", "Button", "ImageButton", "HiddenField" },
    "/",
    new object[] { "Bold", "Italic", "Underline", "Strike", "-", "Subscript", "Superscript" },
    new object[] { "NumberedList", "BulletedList", "-", "Outdent", "Indent", "Blockquote", "CreateDiv" },
    new object[] { "JustifyLeft", "JustifyCenter", "JustifyRight", "JustifyBlock" },
    new object[] { "BidiLtr", "BidiRtl" },
    new object[] { "Link", "Unlink", "Anchor" },
    new object[] { "Image", "Flash", "Table", "HorizontalRule", "Smiley", "SpecialChar", "PageBreak", "Iframe" },
    "/",
    new object[] { "Styles", "Format", "Font", "FontSize" },
    new object[] { "TextColor", "BGColor" },
    new object[] { "Maximize", "ShowBlocks", "-", "About" }
};

Còn nếu bạn muốn có toolbar nhỏ hơn thì hãy code đoạn sau vào:
CKEditor2.config.toolbar = new object[]
{
    new object[] { "Bold", "Italic", "-", "NumberedList", "BulletedList", "-", "Link", "Unlink", "-", "About" },
    new object[] { "Cut", "Copy", "Paste", "PasteText", "PasteFromWord", "-", "Print", "SpellChecker", "Scayt" },
};
Nếu muốn có chức năng nào bạn chỉ cần cho chức năng đó vào mảng object là được.

Còn nếu bạn chỉ cần 1 editor đơn giản như trong phần comment của một số trang thì bạn chỉ cần code đoạn sau vào :

CKEditor3.config.toolbar = "Basic";

Các đoạn code trên các bạn nhớ code ở trang Page_Load event để nó có thể hiển thị được.

Và còn vài thuộc tính hay dùng mà các bạn nên lưu ý:

UIColor: chọn 1 màu cho editor. Mặc định là màu LightGray( hơi xám) như chúng ta thấy.

StartupMode: là chế độ lúc hiển thị. CKEditor có 2 chế độ view đó là view code html và view giao diện được biên dịch từ html.

Ngoài ra có rất nhiều các thuộc tính khác để tùy chinh tính năng vào giao diện cho CKEditor. Hy vọng các bạn sẽ có 1 editor đúng ý. Thanks for reading!