Hướng dẫn tích hợp ckEditor, ckFinder và plugin Syntaxhighlight vào website Asp.Net

Hiện nay có rất nhiều Editor hỗ trợ tốt cho việc soạn thảo trên website, trong bài viết này chúng ta sẽ tìm hiểu cách tích hợp ckEditor và các plugin kèm theo để hỗ trợ cho việc soạn thảo tin bài trên web viết bằng Asp.Net

1. CkEditor & ckFinder

- Việc đầu tiên các bạn cần phải vào trang http://ckeditor.com/download để tải bộ ckEditor 3.6.4 dành riêng cho Asp.Net về máy mình. Trong bộ công cụ các bạn tải về, các bạn chỉ cần chú ý đến file CKEditor.NET.dll ở /bin/Debug . Hãy copy file này vào thư mục bin trong project của bạn (Ở bước này mục đích chính là lấy file dll họ đã buill sẵn về để sử dụng).

- Tiếp theo hãy download bộ ckEdior tại đây, và ckFinder cho Asp.Net tại đây về máy, giải nén ra và copy vào thư mục root của project. (Hiện tại ckFinder vẫn là bản phải trả phí, tuy nhiên nó vẫn cho bạn dùng với dòng chữ cảnh báo đang dùng phiên bản demo). Bạn xem hình dưới để dễ hình dung.

- Trong thư mục ckfinder giải nén ra, bạn vào /bin/Debug tìm file ckFinder.dll và copy vào thủ mục bin trong project của bạn (Tương tự như với ckEditor.Net.dll như đã nói ở trên)

- Ở trang *.aspx của bạn, bạn thêm đoạn mã dưới đây vào ngay sau thẻ <%@ Page Language="C#"... Sau khi thêm sẽ thế này

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="CKEditor.NET" Namespace="CKEditor.NET" TagPrefix="CKEditor" %>

- Tiếp theo bạn thêm đoạn mã sau vào nội dung HTML, nơi mà bạn muốn đặt Editor. Trong đó BasePatch trỏ đến thư mục ckeditor mà bạn đã tải về và copy vào project. Trong trường hợp này thư mục ckeditor để trong thư mục root, nên đường dẫn sẽ là "~/ckeditor". Trong project bạn có thể khác, khi đó bạn cần chỉnh sửa lại đường dẫn cho phù hợp thì Editor mới hiện thị được.

<CKEditor:CKEditorControl ID="editor1" CssClass="editor1" runat="server" Height="400" Width="900" BasePath="~/ckeditor">
</CKEditor:CKEditorControl>

- Để tích hợp ckFinder vào ckEditor, bạn vào trang *.aspx.cs của bạn, trong sự kiện Page_Load, thêm đoạn mã sau.

protected void Page_Load(object sender, EventArgs e)
    {
        if(!IsPostBack)
        {
            //--config ckfinder
            CKFinder.FileBrowser _FileBrowser = new CKFinder.FileBrowser();
            _FileBrowser.BasePath = "ckfinder";
            _FileBrowser.SetupCKEditor(editor1);
        }
    }

2. Syntaxhighlight

- Qua các bước trên bạn đã gần như cấu hình xong một bộ Editor với các chức năng đầy đủ hỗ trợ người dùng soạn thảo bài viết trên web một cách dễ dàng. Tuy nhiên ở phần này tôi muốn hướng dẫn thêm các bạn tích hợp 1 plugin nữa là Syntaxhighlight, nó phục vụ cho việc hiện thị nội dung là những đoạn mã code trên website một cách rõ ràng dễ hiểu. Plugin này rất hữu ích cho những người quản trị web nếu muốn viết các bài hướng dẫn mà có mã code trong đó (như tôi chẳng hạn).

- Đầu tiên các bạn download plugin Syntaxhighligh, sau đó giải nén và copy vào /ckeditor/plugins trong project của bạn. (bạn có thể lấy plugin này trong project demo đính kèm dưới bài viết) vì có một số link download trên mạng tôi không thấy kèm theo script & css để hiện thị highlight ở ngoài.

- Để tích hợp plugin này vào ckEditor, bạn mở file config.js trong thư mục /ckeditor và thêm đoạn mã sau.

config.extraPlugins = 'syntaxhighlight';
config.toolbar_Full.push(['Code']);

- Xong các bước trên là bạn đã hoàn thành việc tích hợp syntaxhightlight vào ckEditor rồi. Tuy nhiên để hiện thị code ở ngoài trang xem bài viết, thì các bạn cần thêm một số đoạn mã sau vào phần <header> của trang xem nội dung bài viết. Thông thường phần này sẽ thêm vào header của trang MasterPage của bạn

<%--Syntaxhighlight--%>
    <script type="text/javascript" src="ckeditor/plugins/syntaxhighlight/scripts/shCore.js"></script>
    <script type="text/javascript" src="ckeditor/plugins/syntaxhighlight/scripts/shBrushA3.js"></script>
    <script type="text/javascript" src="ckeditor/plugins/syntaxhighlight/scripts/shBrushBash.js"></script>
    <script type="text/javascript" src="ckeditor/plugins/syntaxhighlight/scripts/shBrushColdFusion.js"></script>
    <script type="text/javascript" src="ckeditor/plugins/syntaxhighlight/scripts/shBrushCpp.js"></script>
    <script type="text/javascript" src="ckeditor/plugins/syntaxhighlight/scripts/shBrushCSharp.js"></script>
    <script type="text/javascript" src="ckeditor/plugins/syntaxhighlight/scripts/shBrushCss.js"></script>
    <script type="text/javascript" src="ckeditor/plugins/syntaxhighlight/scripts/shBrushDelphi.js"></script>
    <script type="text/javascript" src="ckeditor/plugins/syntaxhighlight/scripts/shBrushDiff.js"></script>
    <script type="text/javascript" src="ckeditor/plugins/syntaxhighlight/scripts/shBrushErlang.js"></script>
    <script type="text/javascript" src="ckeditor/plugins/syntaxhighlight/scripts/shBrushGroovy.js"></script>
    <script type="text/javascript" src="ckeditor/plugins/syntaxhighlight/scripts/shBrushJava.js"></script>
    <script type="text/javascript" src="ckeditor/plugins/syntaxhighlight/scripts/shBrushJavaFX.js"></script>
    <script type="text/javascript" src="ckeditor/plugins/syntaxhighlight/scripts/shBrushJScript.js"></script>
    <script type="text/javascript" src="ckeditor/plugins/syntaxhighlight/scripts/shBrushPerl.js"></script>
    <script type="text/javascript" src="ckeditor/plugins/syntaxhighlight/scripts/shBrushPhp.js"></script>
    <script type="text/javascript" src="ckeditor/plugins/syntaxhighlight/scripts/shBrushPlain.js"></script>
    <script type="text/javascript" src="ckeditor/plugins/syntaxhighlight/scripts/shBrushPowerShell.js"></script>
    <script type="text/javascript" src="ckeditor/plugins/syntaxhighlight/scripts/shBrushPython.js"></script>
    <script type="text/javascript" src="ckeditor/plugins/syntaxhighlight/scripts/shBrushRuby.js"></script>
    <script type="text/javascript" src="ckeditor/plugins/syntaxhighlight/scripts/shBrushScala.js"></script>
    <script type="text/javascript" src="ckeditor/plugins/syntaxhighlight/scripts/shBrushSql.js"></script>
    <script type="text/javascript" src="ckeditor/plugins/syntaxhighlight/scripts/shBrushVb.js"></script>
    <script type="text/javascript" src="ckeditor/plugins/syntaxhighlight/scripts/shBrushXml.js"></script>
    <link type="text/css" rel="stylesheet" href="ckeditor/plugins/syntaxhighlight/styles/shCore.css" />
    <link type="text/css" rel="stylesheet" href="ckeditor/plugins/syntaxhighlight/styles/shThemeDefault.css" />
    <script type="text/javascript">
        SyntaxHighlighter.all();
    </script>
   <%--Syntaxhighlight--%>

- Như vậy bạn đã hoàn thành xong việc tích hợp ckEditor, ckFinder & plugin Syntaxhighlight và website rồi. Bạn có thể xem DEMO tại đây hoặc download file đính kèm ở cuối bài viết để tiện tham khảo.

Download Source

Related Post


Nén HTML và tối ưu hóa mã javascript cho website Asp.Net
Sunday, September 8, 2013
Tối ưu hóa mã nguồn của trang web và tăng tốc độ tải luôn là một vấn đề được các lập trình viên hướng tới. Hiện nay có khá nhiều phương pháp và công cụ hỗ trợ các lập trình viên làm điều này. Hôm nay tôi xin giới thiệu một phương pháp khá đơn giản để giảm dung lượng trang và tối ưu hóa mã javascript trên trang.
Một số cấu hình file web.config an toàn
Friday, August 2, 2013
Khi lập trình web bằng ASP.NET, một thành phần rất quan trọng trong việc đảm bảo an toàn cho website là file web.config. Đây là file chứa các cấu hình cơ bản của website, tuy nhiên, các cấu hình mặc định của nó đôi khi tiềm ẩn nhiều nguy cơ an ninh. Bài viết này chỉ ra một số cấu hình để giúp website của bạn loại bỏ những nguy cơ này.
Search

Đăng ký nhận bài mới


Category

Blog Archive