Question

I want to use CKEditor with DynamicData Web Site. The all examples that I have found are old version of CKEditor.

So How can I integrate CKEditor with asp.net dyamica data web site?

Any help will be greately appreciated.

İY

Answer 1

What I did was to modify the MultilineText_Edit.ascx file + code-behind located in your Dynamic Data /FieldTemplates/ folder as shown below. Note that in my example you would need to reference jQuery and the CKEditor jQuery adapter, the latter most probably located in /ckeditor/adapters/jquery.js.

The idea is to use the HiddenField control with ID=”State” as carrier for the data. Notice the client-script that is registered in the overridden OnPreRender(...): On any .NET form submission (here triggered by Dynamic Data trying to save, update or the like), the data from the CKEditor is saved to the State Hiddenfield, and the data is extraced from the FieldTemplate control from State via the overridden ExtractValues(...).

To clarify: the reason for not returning contents of the TextBox control, Editor, itself, is that this will return the initial contents of the control, discarding CKEditor changes. CKEditor needs to client-side render its markup and stuff to somewhere, and so we do this to the State HiddenField (doing it to the TextBox control itself will mess stuff up, as far as I recall).

One last thing: If you want to keep your MultilineText_Edit.ascx for normal non-CKEditor multiline text editing, put the code in a new file instead, e.g. MultilineHtml_Edit.ascx and set the UIHint for the property to “MultilineHtml” in the metadata class for your partial Linq2SQL class:

[UIHint("MultilineHtml")]
public string Description { get; set; }

MultilineText_Edit.ascx

<%@ Control Language="C#" CodeBehind="MultilineText_Edit.ascx.cs" Inherits="MyProject.DynamicData.MultilineText_EditField" %>


<asp:TextBox ID="Editor" TextMode="MultiLine" runat="server" />
<asp:HiddenField ID="State" runat="server" />

<script type="text/javascript">
    $(document).ready(function () {
        $('#<%= Editor.ClientID %>').ckeditor(function () { }, { height: '400px' });
    });
</script>


<asp:RequiredFieldValidator runat="server" id="RequiredFieldValidator1" CssClass="DDControl DDValidator" ControlToValidate="Editor" Display="Static" Enabled="false" />
<asp:RegularExpressionValidator runat="server" ID="RegularExpressionValidator1" CssClass="DDControl DDValidator" ControlToValidate="Editor" Display="Static" Enabled="false" />
<asp:DynamicValidator runat="server" id="DynamicValidator1" CssClass="DDControl DDValidator" ControlToValidate="Editor" Display="Static" />

MultilineText_Edit.ascx.cs

using System;
using System.Collections.Specialized;
using System.Web.UI;

namespace MyProject.DynamicData
{
    public partial class MultilineText_EditField : System.Web.DynamicData.FieldTemplateUserControl
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            Editor.MaxLength = Column.MaxLength;
            Editor.ToolTip = Column.Description;

            SetUpValidator(RequiredFieldValidator1);
            SetUpValidator(RegularExpressionValidator1);
            SetUpValidator(DynamicValidator1);
        }

        public override void DataBind()
        {
            Editor.Text = FieldValueEditString;

            base.DataBind();
        }

        protected override void OnPreRender(EventArgs e)
        {
            Page.ClientScript.RegisterOnSubmitStatement(
                this.GetType(),
                string.Format("kfckpb_{0}", this.ClientID),
                string.Format("$('#{0}').val($('#{1}').val());", State.ClientID, Editor.ClientID)
                );

            base.OnPreRender(e);
        }


        protected override void ExtractValues(IOrderedDictionary dictionary)
        {
            dictionary[Column.Name] = ConvertEditedValue(State.Value);
        }

        public override Control DataControl
        {
            get
            {
                return Editor;
            }
        }

    }
}