1

FormView 内に ASP.NET データ バインド テキスト ボックスがあり、TinyMCE エディターが接続された jQuery UI ダイアログに表示したいと考えています。エディタを接続した状態で正しく表示されました

ここに画像の説明を入力

しかし、フォームが (データベースに保存するために) ポストバックされると、エディター内のテキストは失われ、ポストされません。

これは<div>、ダイアログに使用しているのマークアップです。

<span id="ExcessiveDutyOfCareWordingDialogLink" style="cursor: hand;">View/Edit Wording</span>
<div id="ExcessiveDutyOfCareWordingDialog" title="Excessive Duty Of Care Wording">
    <asp:TextBox runat="server" ID="ExcessiveDutyOfCareWordingTextBox" 
    Text='<%# Bind("ExcessiveDutyOfCareWording") %>' CssClass="richText" ClientIDMode="Static" />
</div>

そして、ダイアログとエディターを初期化するために使用している Javascript を使用し、<span>クリックすると実際に表示されます。

$('#ExcessiveDutyOfCareWordingDialog').dialog({ autoOpen: false, height: 300, width: 400, modal: true, resizable: false, buttons: {
        Save: function ()
        {
            // This is from an earlier attempt to fix this problem
            // it may be a red herring
            tinyMCE.triggerSave();
            $(this).dialog("close");
        },
        Cancel: function ()
        {
            $(this).dialog("close");
        }
    }
});

$('#ExcessiveDutyOfCareWordingDialogLink').click(function () 
{
    $('#ExcessiveDutyOfCareWordingDialog').dialog('open'); return false; 
});

$('.richText').tinymce({
    // Location of TinyMCE script 
    script_url: '/Scripts/tinymce.3.4.5/tiny_mce.js',
    theme: "advanced",
    theme_advanced_buttons1: "bold,italic,underline,strikethrough,|,cut,copy,paste,|,bullist,numlist,|,undo,redo",
    theme_advanced_buttons2: "",
    theme_advanced_buttons3: "",
    theme_advanced_buttons4: "",
    theme_advanced_toolbar_location: "top",
    theme_advanced_toolbar_align: "left",
    width: "100%",
    height: "20px"
});

エディターからテキストが失われている理由を説明するために、私が間違っている可能性があることを誰かが提案できますか?

4

2 に答える 2

2

提供されたサンプル コードには、実際には 2 つの問題があります。

1) jQuery ダイアログは、レンダリングされたドキュメントのタグから DOM 要素 (<div>ダイアログの) を実際に移動します<form>(レンダリングされたページのソースを見ることで確認できます)。

<div>バックを内側に移動しない限り<form>、ポストバック時にダイアログ内のコントロールの値が失われます。

これを修正するには、.dialog 関数定義の後に次のコード行を追加します。

$('#ExcessiveDutyOfCareWordingDialog').parent().appendTo($("form:first"));

2) [保存] ボタンは<span>、クリックしてもポストバックが発生しないようにレンダリングされます。ポストバックをトリガーしたいだけの場合は、ページのフォームで form.submit() を呼び出すだけです。

コードは次のようになります。

$('#ExcessiveDutyOfCareWordingDialog').dialog({
    autoOpen: false,
    height: 300,
    width: 400,
    modal: true,
    resizable: false,
    buttons: {
        Save: function () {
            $('form:first').submit();
            $(this).dialog("close");
        },
        Cancel: function () {
            $(this).dialog("close");
        }
    }
});

$('#ExcessiveDutyOfCareWordingDialog').parent().appendTo($("form:first"));
于 2012-07-13T21:10:25.983 に答える
0

ソレックスがすでに述べたように、div 要素は DOM 内を移動します。Tinymce はこのような動きを好まず、エディター インスタンスが混乱してコンテキストが失われます。

于 2012-07-16T07:40:50.250 に答える