ASP.NET 使用 CKEditor和CKFinder

一兩年前有分享過一篇FCKEditor的HTML編輯器，這幾年都改寫系統所以就比較少用到了，這陣子朋友講到什麼CKEditor，本來想說是少講嗎?還是，結果查了一下發現原來是新版的HTML編輯器。

自己稍微測試加上Google了一下，發現CKEditor搭配CKFinder功能更加強大，抹彩挖(台)特地寫了一個文字編輯器來使用了，結果這麼強大的功能害我不得不放棄我自己的文字編輯器(有點難看如下圖)，在這裡不不打算說明功能如何強大，有興趣的人可以自己到官網查詢，在本文我只要簡單的敘述一下該怎麼在ASP.NET中使用CKEditor就好。

1. 首先先在ASP.NET頁面中拉入控制項如下語法所示，其中BasePath必須指定為CKFinder程式所放置的路徑(見圖)

<CKEditor:CKEditorControl ID="CKEditorControl1" runat="server" 
 Skin="office2003" BasePath="~/ckeditor">
</CKEditor:CKEditorControl>

2. 再來因為使用NET版本的CKEditor，在官網說到要改變ToolBar的物件，必須在PageLoad中執行，因此為了避免多個畫面中都要使用到，因此乾脆直接寫一個Class來讓每支AP共用。下面的語法當中可以動態的改變各項屬性及設定&結合CKFinder一起使用的設定。

//改變各項設定
CKEditorControl.Language = "zh";
CKEditorControl.config.font_names = @"Arial/Arial, Helvetica, sans-serif;
                        Arial Unicode MS/Arial Unicode MS, sans-serif;
                        Comic Sans MS/Comic Sans MS, cursive;
                        Courier New/Courier New, Courier, monospace;
                        Georgia/Georgia, serif;
                        Lucida Sans Unicode/Lucida Sans Unicode, Lucida Grande, sans-serif;
                        Tahoma/Tahoma, Geneva, sans-serif;
                        Times New Roman/Times New Roman, Times, serif;
                        Trebuchet MS/Trebuchet MS, Helvetica, sans-serif;
                        Verdana/Verdana, Geneva, sans-serif;
                        細明體/細明體, sans-serif;
                        新細明體/新細明體, serif;
                        標楷體/標楷體, sans-serif;
                        微軟正黑體/微軟正黑體, sans-serif";
CKEditorControl.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[] { "Image", "Table", "HorizontalRule", "Smiley", "SpecialChar", "PageBreak" },
    "/",
    new object[] { "Styles", "Format", "Font", "FontSize" },
    new object[] { "TextColor", "BGColor" },
    new object[] { "Maximize", "ShowBlocks", "-", "About" }       
};

//CKEditor搭配CKFinder一起使用
CKFinder.FileBrowser _FileBrowser = new CKFinder.FileBrowser();
_FileBrowser.BasePath = CKEditorControl.ResolveClientUrl("~/ckeditor/ckfinder/");
_FileBrowser.SetupCKEditor(CKEditorControl);

3. 最後動態擴展上傳檔案路徑，這樣一來就可以讓不同的AP擁有不同的上傳檔案的路徑。老樣子一樣還是使用Session來完成【 config.ascx】 ，不再說明，看一下語法應該懂

/// 
 擴展動態指定上傳檔案路徑 
public string DefaulteBaseUrl
{
    get
    {
        object value = HttpContext.Current.Session["CKFinder_DefaulteBaseUrl"];

        if (value == null || string.IsNullOrEmpty(value.ToString()))
            return "/ckfinder/userfiles/";
        else
            return Page.ResolveUrl(value.ToString());
    }
}

// The base URL used to reach files in CKFinder through the browser.
//BaseUrl = "/ckfinder/userfiles/";
BaseUrl = DefaulteBaseUrl;

相關部落格
KingKong Bruce

本文附件 :
ckeditor_net_3.5.2.zip → 官方網站CKEditor NET版本備份
ckfinder_aspnet_2.0.2.1.zip → 官方網站CKFinder NET版本備份
DemoEditor.zip → KingKong Bruce分享程式備份
MyTest.zip → 我的程式備份(整合NET版本)