CKEditor 3.x and Asp.Net

Hey All,
Haven't seen any postings for ASP.NET integration of CKEditor 3.x so just thought I'd share some code I used to get it working.
Notes: Windows 2003 Server, IIS 6, Visual Studio 2008, SQL Server 2008, c#
So in a nutshell, used FCKEditor 2.4 originally with a data store to house the content.
Created Textarea HTML element with runat="server"

<textarea rows="20" cols="70" name="editor1" id="editor1" runat="server"></textarea>

Since having it defined as a server side HTML control now, have to be concerned about the generated client side ID for use in the Javascript for the CKEditor.replace. So used code behind (c#) to generate the required script

    private void BuildJS()
    {
        StringBuilder _js = new StringBuilder();
        _js.AppendLine("<script type='text/javascript' language='javascript'>");
        _js.AppendLine("CKEDITOR.replace( '" + editor1.ClientID + "' );");
        _js.AppendLine("</script>");

        ClientScript.RegisterStartupScript(GetType(), "CKEditor", _js.ToString());
    }

editor1.ClientID will get us the correct client side id for the replace to work.
You can call the function on the Page_Load operation and that should generate the editor for you.
The rest (not shown) is common calls to load the HTML control with the data pulled for my data store and to update/insert as well.
Just a quick start...
HTH
Dave

Mon, 11/23/2009 - 11:43

naji

Joined: 20/11/2009

Posts: 3

Re: CKEditor 3.x and Asp.Net

Good first steps,
But have you run it or test it?

I'm getting "A potentially dangerous Request.Form value was detected from the client (CKeditor1="<p>
My Text</p...")."

And my analysis is:
Text area RunAt server and on form submit CKeditor updates the text area with its content as is, that content is not encoded and sent to the server as HTML tags causing potential dangerous request.

And setting ValidateRequest = false is not recommended option, as you disable security feature.

Any solutions?

Thu, 03/25/2010 - 03:21

dke01

Joined: 04/01/2010

Posts: 6

Re: CKEditor 3.x and Asp.Net

Yes you set ValidateRequest = false

but on the serve side use Microsoft Anti-Cross Site Scripting Library http://msdn.microsoft.com/en-us/library/aa973813.aspx to strip out and script tags etc

Sun, 03/28/2010 - 17:36

bitterstar

Joined: 06/09/2009

Posts: 3

Re: CKEditor 3.x and Asp.Net

No, you should not be turning off request validation.

Instead add the following to CKeditor's config file:

config.htmlEncodeOutput = true;

And then do this in your .NET code

C#:

var text = Request.Form["SubmittedFormValue"];
text = text.Replace("&lt;", "<").Replace("&gt;", ">").Replace("&amp;", "&");

VB:

Dim text As String = Request.Form("SubmittedFormValue")
text = text.Replace("&lt;", "<").Replace("&gt;", ">").Replace("&amp;", "&")

Mon, 03/29/2010 - 10:49

ishtar

Joined: 29/03/2010

Posts: 1

Re: CKEditor 3.x and Asp.Net

Here is my solution for ASP.NET in C#

public class CkEditor
        : System.Web.UI.WebControls.TextBox
    {
        private string _basePath;
        private string _mainscriptName = "ckeditor.js";

        public override System.Web.UI.WebControls.TextBoxMode TextMode
        {
            get
            {
                return System.Web.UI.WebControls.TextBoxMode.MultiLine;
            }
            set
            {
                throw new NotSupportedException();
            }
        }

        public override string Text
        {
            get
            {
                return Page.Server.HtmlDecode(base.Text);
            }
            set
            {
                base.Text = value;
            }
        }
                

        public string BasePath
        {
            get
            {
                if (string.IsNullOrEmpty(_basePath))
                {
                    string s = ConfigurationManager.AppSettings["CKeditor:BasePath"];
                    if (!string.IsNullOrEmpty(s))
                    {
                        _basePath = s;
                    }
                    else
                    {
                        _basePath = "~/CkEditor/";
                    }

                }
                return _basePath;
            }
            set
            {
                _basePath = value;
            }
        }

        protected override void OnInit(EventArgs e)
        {
            //base.TextMode = System.Web.UI.WebControls.TextBoxMode.MultiLine;
            
            base.OnInit(e);
        }

        protected override void OnPreRender(EventArgs e)
        {
            if (BasePath.StartsWith("~/"))
            {
                BasePath = BasePath.Replace("~/", GetApplicationPath());
            }


            HtmlGenericControl script = new HtmlGenericControl("script");
            script.Attributes.Add("type", "text/javascript");
            script.Attributes.Add("src", BasePath + _mainscriptName);
            script.InnerHtml = " ";

            Page.Header.Controls.Add(script);

            string sciptText = string.Format("CKEDITOR.replace( '{0}' );", this.ClientID);

            Page.ClientScript.RegisterStartupScript(typeof(CkEditor), "ckeditor_" + this.ID, sciptText, true);

            base.OnPreRender(e);
        }

        public static string GetApplicationPath()
        {
            string applicationPath = "/";
            if (System.Web.HttpContext.Current != null && System.Web.HttpContext.Current.Request != null)
            {
                applicationPath = System.Web.HttpContext.Current.Request.ApplicationPath;
            }
            return FormatHelper.CompleteUrl(applicationPath);
        }

    }

CkEditor configuration: config.js

CKEDITOR.editorConfig = function( config )
{   
    config.htmlEncodeOutput = true;
};

Tue, 07/27/2010 - 18:11

ddot

Joined: 27/07/2010

Posts: 1

Re: CKEditor 3.x and Asp.Net

thx @ bitterSTAR!!!!