Jerry Huang apps and developing apps

From the first day of using BlogEngine, I'm suffering the built-in editor which is the stupid TinyMCE. I finally make up my mind to replace it after upgraded the website to the latest BlogEngine 2.0 version, because it's really slow when typing.

1. download the latest ckeditor and ckfinder for ASP.NET, put CKEditor.NET.dll and CKFinder.dll to the BIN folder of your blogengine website;
   and copy the rest stuff to editors folder, like: editors/ckeditor; editors/ckfinder;
2. disable any form of http compression, including but not limit to IIS settings (if you had enabled) and blogengine compression, otherwise ckfinder will not working
3. edit blogengine web.config file, to disable the default http compression, search for "CompressionModule", remove or comment the whole line, i.e.
   <!--add name="CompressionModule" type="BlogEngine.Core.Web.HttpModules.CompressionModule, BlogEngine.Core"/-->
   *BTW, I spent hours to troubleshoot ckfinder, before I disable this setting, I always got an "system error" 1072896748 with ckfinder.
   
   By now, you should proper config ckeditor and ckfinder, make sure you are able to run those samples. You will need to set folder permission, change config files etc, for details, please refer to ckeditor and ckfinder's documentations.
   
   From the next step, will start to integrate blogengine with ckeditor and ckfinder.
    
4. modify admin/HtmlEditor.ascx

[code language=ASPX]

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="htmlEditor.ascx.cs" Inherits="Admin.HtmlEditor" %>
<%@ Register Src="tinyMCE.ascx" TagName="tinyMCE" TagPrefix="uc1" %>
<%--<uc1:tinyMCE ID="TinyMCE1" runat="server" />--%>

<textarea class="ckeditor" ID="TinyMCE1" style="width:100%" rows="40" runat="server"></textarea>

<script src='/editors/ckeditor/ckeditor.js' type='text/javascript'></script>
<script src='/editors/ckfinder/ckfinder.js' type='text/javascript'></script>
<script type= "text/javascript" defer="defer">
/*
var oFCKeditor = new CKeditor( '<%=TinyMCE1.ClientID %>',null,null,"Default" ) ;
oFCKeditor.BasePath = "/editors/ckeditor/" ;
oFCKeditor.filebrowserBrowseUrl = '/editors/ckfinder/ckfinder.html';
oFCKeditor.filebrowserImageBrowseUrl = '/editors/ckfinder/ckfinder.html?type=Images';
oFCKeditor.filebrowserFlashBrowseUrl = '/editors/ckfinder/ckfinder.html?type=Flash';
oFCKeditor.ReplaceTextarea() ;
*/
CKEDITOR.replace( '<%=TinyMCE1.ClientID %>',
{
filebrowserBrowseUrl : '/editors/ckfinder/ckfinder.html',
filebrowserImageBrowseUrl : '/editors/ckfinder/ckfinder.html?type=Images',
filebrowserFlashBrowseUrl : '/editors/ckfinder/ckfinder.html?type=Flash',
filebrowserUploadUrl : '/editors/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files',
filebrowserImageUploadUrl : '/editors/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images',
filebrowserFlashUploadUrl : '/editors/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash',
filebrowserWindowWidth : '1000',
filebrowserWindowHeight : '700'
});
</script>

[/code]

5. modify admin/HtmlEditor.ascx.cs

[code language=C#]

// --------------------------------------------------------------------------------------------------------------------
// <summary>
//   The admin_html editor.
// </summary>
// --------------------------------------------------------------------------------------------------------------------

namespace Admin
{
    using System.Web.UI;

    /// <summary>
    /// The admin_html editor.
    /// </summary>
    public partial class HtmlEditor : UserControl
    {
        #region Properties

        /// <summary>
        /// Gets or sets TabIndex.
        /// </summary>
       
        public short TabIndex
        {
         /*
            get
            {
                return this.TinyMCE1.TabIndex;
            }

            set
            {
                this.TinyMCE1.TabIndex = value;
            }*/
            get { return 0; }
      set { }

        }

        /// <summary>
        /// Gets or sets Text.
        /// </summary>
        public string Text
        {
            get
            {
                return this.TinyMCE1.Value;
            }

            set
            {
                this.TinyMCE1.Value = value;
            }
        }
       
        public string EditorID
        { get{return TinyMCE1.ClientID;}}

        #endregion
    }
}

[/code]

6. modify admin/Posts/Add_entry.aspx, should be 2 places in AutoSave and SavePost javascript functions
   replace "tinyMCE.activeEditor.getContent();" with "CKEDITOR.instances['<%=txtContent.EditorID %>'].getData()"
7. modify admin/Posts/EditPage.aspx, similar with above, but only 1 place in SavePage function
   change  var content = tinyMCE.activeEditor.getContent(); to
   var content = CKEDITOR.instances['<%=txtContent.EditorID %>'].getData();
8. modify CheckAuthentication function in editors/ckfinder/config.ascx
   to integrate the blogengine authentication, otherwise everyone will be able to upload file to your user file folder if you simply return true:
   return Page.User.Identity.IsAuthenticated;
9. It's not realted to integration, but it's a security issue that most people forgot,
   * to remove all samples in the _samples folder, as well as the _source folder
   * it's a good practice to follow the ckfinder's suggestion: in IIS, set Execute Permissions to "none" in the properties of the user files folder (ie. upload folder)