如何使用的CKEditor在DynamicData项目呢？ [英] How to use CKEditor in DynamicData project?

问题描述

我想使用的CKEditor与DynamicData网站。我发现所有的例子都是老版的CKEditor的。

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

所以，我怎么能与集成asp.net dyamica数据网站CKEditor的？

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

任何帮助将是greately AP preciated。

Any help will be greately appreciated.

IY

推荐答案

我所做的就是修改 MultilineText_Edit.ascx 文件+ code-背后位于您的动态数据的 / FieldTemplates / 的文件夹，如下图所示。请注意，在我的例子中，你将需要引用的jQuery和jQuery的CKEditor的适配器，后者很可能位于 /ckeditor/adapters/jquery.js 的。

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.

我们的想法是使用 HiddenField 控制与ID =国家的为载体的数据。请注意，是注册在重写在preRender（...）的客户端脚本：在任何.NET表单提交（动态数据触发这里试图拯救，更新等），从CKEditor的数据被保存到的国家的Hiddenfield，并且数据从FieldTemplate控制的国家的通过覆盖<$ C extraced $ C> ExtractValues​​（...）。

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(...).

要澄清：不返回文本框控制内容的原因，的编辑器的本身，就是这将返回的初始内容控制，丢弃CKEditor的变化。 CKEditor的需要客户端呈现其标记和东西的地方，所以我们这样做是为了在国家的 HiddenField （它做给文本框控制本身会搞乱东西了，据我记得）。

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).

最后一件事：如果你要保持你的 MultilineText_Edit.ascx 作为正常的非CKEditor的多行文字编辑，把code在一个新的文件，而不是如 MultilineHtml_Edit.ascx 并设置UIHint的属性设置为 MultilineHtml 的为您的部分LINQ2SQL类的元数据类：

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;
            }
        }

    }
}

这篇关于如何使用的CKEditor在DynamicData项目呢？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！