c# - DynamicDataプロジェクトでCKEditorを使用する方法は？

Question

DynamicDataWebサイトでCKEditorを使用したい。私が見つけたすべての例は、古いバージョンのCKEditorです。

では、CKEditorをasp.net dyamicaデータWebサイトと統合するにはどうすればよいですか？

どんな助けでも大歓迎です。

İY

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コントロールのコンテンツを返さない理由、エディター自体は、これがコントロールの最初のコンテンツを返し、CKEditorの変更を破棄するためです。CKEditorはクライアント側でマークアップなどをどこかにレンダリングする必要があるため、これを州 HiddenFieldに対して行います（TextBox私が覚えている限り、コントロール自体に対して行うと混乱します）。

最後にもう1つ：通常の非CKEditorマルチラインテキスト編集用にMultilineText_Edit.ascxを保持する場合は、代わりにコードを新しいファイル（ 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

私のテスト済みソリューション

CKEditor for ASP.NET（ckeditor_aspnet_3.6.2.zip）をhttp://ckeditor.com/downloadからダウンロードします。
- インストールの詳細：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 Webサイトが次の場所にあると仮定します：C：\ Users \ MyUserName \ Documents \ Visual Studio 2010 \ WebSites \ MyWebSite \
C：\ temp \ ckeditor_aspnet_3.6.2_Samples \ bin\-folderを...\MyWebSite \bin\にコピーします
C：\ temp \ ckeditor_aspnet_3.6.2_Samples \ ckeditor\-folderを...\MyWebSite \ckeditor\にコピーします
VisualStudioで、CKEditorへの参照を追加します。
- ソリューションエクスプローラーで...\MyWebSite \を右クリックし、[参照の追加]を選択します。
- [参照]ペインをクリックし、... \ MyWebSite \ bin \ CKEditor.NET.dllを参照して、[OK]をクリックします
これらのファイルを作成し、... \ 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