封神者

在網站專案底下
新增 ~/ image / CKeditor 來接收上傳的圖片。
新增 ~/ code/ CKeditor / UploadImage.ashx。
新增 ~/ PastUpload.aspx (命名可隨意)

[UploadImage.ashx] 內容大致如下：
//context.Response.ContentType = "text/plain";
//context.Response.Write("Hello World");
context.Response.ContentType = "text/html";
context.Response.Charset = "utf-8";

HttpPostedFile uploadImg = context.Request.Files["upload"];
// string CKEditorFuncNum = context.Request["CKEditorFuncNum"];
// if (CKEditorFuncNum != null && CKEditorFuncNum != "") { } else { CKEditorFuncNum = "1"; }
string upImg = System.IO.Path.GetFileName(uploadImg.FileName);
var t = DateTime.Now.ToString("yyMMddHHmmss");
upImg = t + "-" + upImg;

var fileName = System.Web.HttpContext.Current.Server.MapPath("~\\image\\CKeditor\\" + upImg);
uploadImg.SaveAs(fileName);

string strReq = "{\"uploaded\":1,\"fileName\":\"" + upImg + "\",\"url\":\""+"~/image/CKeditor/" + upImg+"\"}";
//  (url:路徑須比照 PastUpload.aspx 對於 ~/image/CKeditor/ 的路徑，如果上傳的 fileUpload.aspx 在資料夾底下則改用 ../image/CKeditor/ )
context.Response.Write(strReq );
context.Response.End();

[PastUpload.aspx] 內容大致如下：
<!-- ckeditor -->
<script src="/javascript/ckeditor/ckeditor.js"></script>
<asp:TextBox ID="Text_TB" runat="server" TextMode="MultiLine" Height="300px" CssClass="ckeditor" placeholder="網頁內文內容"></asp:TextBox>
<script type="text/javascript">
    var TextName = "";
    TextName = '<%=Text_TB.ClientID.Replace("_","$").Replace("Text$TB","Text_TB") %>';
    CKEDITOR.replace(TextName, {
        extraPlugins: 'image', skin: 'moono-lisa', toolbar: 'full',
        uploadUrl: '/code/ckeditor/UploadImage.ashx',  // 此行開啟 拖曳上傳圖片功能
        filebrowserImageUploadUrl: '/code/ckeditor/UploadImage.ashx'   // 此行開啟 功能列上傳圖片功能
    });
</script>


//----------    基於安全性理由將程式改寫為
[config.js] 內容大致如下：
    config.allowedContent = true;
    config.protectedSource.push(/<i[^>]*><\/i>/g);
    
    contenteditable="true";
    config.language = 'zh';
    //config.uiColor = '#F7B42C';
    //config.height = 300;
    config.toolbarCanCollapse = true;
    config.pasteFilter = 'p; a[!href]';
    config.image_previewText = ' ';
    config.format_tags = 'p;h1;h2;h3;pre';

    // The toolbar groups arrangement, optimized for two toolbar rows.
    //config.toolbarGroups = [
    //    { name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
    //    { name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },
    //    { name: 'links' },
    //    { name: 'insert' },
    //    { name: 'forms' },
    //    { name: 'tools' },
    //    { name: 'document', groups: ['mode', 'document', 'doctools'] }
    //    , { name: 'others' }
    //    //, '/'
    //    , { name: 'basicstyles', groups: ['basicstyles', 'cleanup'] }
    //    , { name: 'paragraph', groups: ['list', 'indent', 'blocks', 'align', 'bidi'] }
    //    , { name: 'styles' }
    //    , { name: 'colors' }
    //    //, { name: 'about' }
    //];
    config.extraPlugins = 'image';
    config.skin= 'moono-lisa';
    config.toolbar= 'full';
    config.uploadUrl = CKEDITOR.basePath + '../../code/ckeditor/UploadImage.ashx';
    config.filebrowserImageUploadUrl = CKEDITOR.basePath + '../../code/ckeditor/UploadImage.ashx';
    //(路徑依照 /js/ckeditor/config.js 的相對路徑到 /code/ckeditor/UploadImage.ashx 的位置


[PastUpload.aspx] 內容大致如下：
<!-- ckeditor -->
<script src="/js/ckeditor/ckeditor.js"></script>
<asp:TextBox ID="Text_TB" runat="server" TextMode="MultiLine" Height="300px" CssClass="ckeditor" placeholder="網頁內文內容"></asp:TextBox>
<script type="text/javascript">
    var TextName = "";
    TextName = '<%=Text_TB.ClientID.Replace("_","$").Replace("Text$TB","Text_TB") %>';
    CKEDITOR.replace(TextName, { });  // 直接把程式上傳路徑隱藏避免不必要的資訊公開。
</script>