c# - 如何在 DynamicData 项目中使用 CKEditor？

Question

我想将 CKEditor 与 DynamicData 网站一起使用。我发现的所有示例都是旧版本的 CKEditor。

那么如何将 CKEditor 与 asp.net dyamica 数据网站集成呢？

任何帮助将不胜感激。

伊耶

score 4 · Accepted Answer

我所做的是修改位于 Dynamic Data /FieldTemplates/文件夹中的MultilineText_Edit.ascx文件 + 代码隐藏，如下所示。请注意，在我的示例中，您需要引用 jQuery 和 CKEditor jQuery 适配器，后者很可能位于/ckeditor/adapters/jquery.js中。

想法是使用HiddenFieldID=" State " 的控件作为数据的载体。注意在覆盖中注册的客户端脚本OnPreRender(...)：在任何 .NET 表单提交（这里由动态数据尝试保存、更新等触发）时，来自 CKEditor 的数据被保存到State Hiddenfield，并且数据是通过覆盖从State的 FieldTemplate 控件中提取ExtractValues(...).

TextBox澄清一下：不返回控件内容的原因， Editor本身，这将返回控件的初始内容，丢弃 CKEditor 更改。CKEditor 需要在客户端将其标记和内容渲染到某个地方，因此我们对State HiddenField执行此操作（据我记得，对TextBox控件本身执行此操作会搞砸东西）。

最后一件事：如果您想保留MultilineText_Edit.ascx以进行正常的非 CKEditor 多行文本编辑，请将代码放在新文件中，例如MultilineHtml_Edit.ascx并在元数据类中将属性的 UIHint 设置为“ MultilineHtml ”对于您的部分 Linq2SQL 类：

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

    }
}

score 1 · Accepted Answer

我的测试解决方案

从http://ckeditor.com/download下载 CKEditor for ASP.NET (ckeditor_aspnet_3.6.2.zip)
- 有关安装的更多信息：http: //docs.cksource.com/CKEditor_3.x/Developers_Guide/ASP.NET/Integration_Beginners
清除 ckeditor_aspnet_3.6.2.zip 到例如 c:\temp\ckeditor_aspnet_3.6.2
假设您的 MS VisualStudio 2010 网站位于此处：C:\Users\MyUserName\Documents\Visual Studio 2010\WebSites\MyWebSite\
将 C:\temp\ckeditor_aspnet_3.6.2_Samples\bin\ - 文件夹复制到 ...\MyWebSite\bin\
将 C:\temp\ckeditor_aspnet_3.6.2_Samples\ckeditor\ - 文件夹复制到 ...\MyWebSite\ckeditor\
在 VisualStudio 中，添加对 CKEditor 的引用：
- 在解决方案资源管理器中，右键单击 ...\MyWebSite\ 并选择 Add Reference ：
- 单击浏览 - 窗格，浏览到 ...\MyWebSite\bin\CKEditor.NET.dll 并单击确定
创建这些文件并将它们保存到 ...\MyWebSite\DynamicData\FieldTemplates\

欢迎提出意见和建议。

...\MyWebSite\DynamicData\FieldTemplates\CKEditor_edit.ascx

<%@ Control Language="C#"
    AutoEventWireup="true"
    CodeFile="CKEditor_Edit.ascx.cs"
    Inherits="Html_EditField" %>
<%@ Register Assembly="CKEditor.NET" Namespace="CKEditor.NET" TagPrefix="CKEditor" %>

<CKEditor:CKEditorControl 
    ID="TextBox1"
    Text='<%# FieldValueEditString %>'
    runat="server"
    Width="800"
    PasteFromWordNumberedHeadingToList="True"
    PasteFromWordPromptCleanup="True"
    PasteFromWordRemoveFontStyles="True"
    PasteFromWordRemoveStyles="True"
    Toolbar="[['Bold', 'Italic', '-', 'NumberedList','BulletedList', '-', 'Link', 'Unlink', '-', 'About'],['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'SpellChecker', 'Source'],['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat']]">
</CKEditor:CKEditorControl>

...\MyWebSite\DynamicData\FieldTemplates\CKEditor_edit.ascx.cs

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

public partial class Html_EditField : System.Web.DynamicData.FieldTemplateUserControl
{
    //refer http://www.graytechnology.com/Blog/post/Using-a-Rich-Text-Editor-with-Dynamic-Data.aspx for explanation
    protected void Page_Load(object sender, EventArgs e)
    {
    }

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

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

...\MyWebSite\App_Code\mytable.cs ##

using System;
using System.ComponentModel.DataAnnotations;
using System.Web;
using System.ComponentModel;

/// <summary>
/// Formatting the mytable -table fields.
/// </summary>

[MetadataType(typeof(mytableMetadata))]
public partial class mytable
{
    // The CKEditor cannot check the length of myfield, and the 
    // DataAnnotations StringLengthAttribute doesn't work with CKEditor,
    // so you have to do a custom check. 
    // 
    // This works as expected only when NOT debugging. 
    // 
    // In debug mode the application will open a window saying 
    // "ValidationException was unhandled by user code",
    // but the message is shown as it is set below in the code. 
    // Hit F5 again, and application will continue OK.
    partial void OnValidate(System.Data.Linq.ChangeAction action)
    {
        if (this._myfield.Length > 1024)
        {
            throw new ValidationException(
               "Length of myfield must be less than 1025 characters.");
        }    }

public class mytableMetadata
{
    [DisplayFormat(HtmlEncode = false)]  // The field is displayed as HTML, when not edited. 
    [UIHint("CKEditor")]                 // The field is edited with CKEditor. 
    public object myfield { get; set; }
}

c# - 如何在 DynamicData 项目中使用 CKEditor？

2 回答 2

我的测试解决方案

...\MyWebSite\DynamicData\FieldTemplates\CKEditor_edit.ascx

...\MyWebSite\DynamicData\FieldTemplates\CKEditor_edit.ascx.cs

...\MyWebSite\App_Code\mytable.cs ##

Related

Reference