1

私の MVC3 プロジェクトで TinyMCE エディターを使用しようとしています。ブラウザで表示して正常に動作していますが、フォームでポストバックするデータを取得できません。

私の見解（スニペット）：

<div  class="formRow">
    <div class="formFieldFull">
        <div class="editor-label">
            @Html.LabelFor(model => model.Conditions)
        </div>
        <div class="large-multiline-field" style="width:396px;">
            @Html.EditorFor(model => model.Conditions)
        </div>
        <div class="validationMsg">
            @Html.ValidationMessageFor(model => model.Conditions)
        </div>
    </div>
</div>

TinyMCE を使用しない場合、Conditions フィールドはテキストエリアとしてレンダリングされます。TinyMCE を使用すると、そのテキストエリアを独自のものでオーバーレイし、そこに問題があるようです。元のテキストエリアはありますが、display:none に設定されています。TinyMCE は、いくつかのタグの間にフィールド コンテンツのコピーを配置し、そこに編集されたコンテンツが存在するように見えます。フォームをポストバックすると、元のテキストエリアには元の応答のフィールド コンテンツが含まれており、返されるべき編集されたコンテンツは含まれていません。

TinyMCE を使用して (Firebug で) レンダリングされたコードは次のようになります。

<div class="large-multiline-field" style="width:396px;">
    <textarea id="Conditions" rows="2" name="Conditions" data-val-length-max="2000" data-val-length="Conditions must be under 2000 characters." data-val="true" cols="20" length="40" style="display: none;" aria-hidden="true">
---->   ACTUAL CONTENT GOES HERE
    </textarea>
    <span id="Conditions_parent" class="mceEditor defaultSkin" role="application" aria-labelledby="Conditions_voice">
        <span id="Conditions_voice" class="mceVoiceLabel" style="display:none;">Rich Text Area</span>
        <table id="Conditions_tbl" class="mceLayout" cellspacing="0" cellpadding="0" role="presentation" style="width: 404px; height: 222px;">
            <tbody>
                <tr class="mceFirst" role="presentation">
                    TinyMCE Toolbars go here
                </tr>
                <tr class="mceLast">
                    <td class="mceIframeContainer mceFirst mceLast">
                        <iframe id="Conditions_ifr" frameborder="0" src="javascript:""" allowtransparency="true" title="Rich Text AreaPress ALT-F10 for toolbar. Press ALT-0 for help" style="width: 100%; height: 153px; display: block;">
                            <html>
---->                           EDITED CONTENT GOES HERE
                            </html>
                        </iframe>
                    </td>
                </tr>
            </tbody>
        </table>
    </span>
</div>

ポストバックの前に、TinyMCE が元のテキストエリアを編集されたコンテンツで更新するようにするために、私がすべきことはありますか?

4

1 に答える 1

3

解決策は簡単です。コンテンツをエディターからルート html 要素 (テキストエリア) に書き戻すには、小さな JavaScript を発行する必要があります。通常、書き戻し機能をトリガーするブラウザー イベントがいくつかありますが、それらは何らかの理由で起動されないようです。フォームをサーバーに送信する前に呼び出す必要がある単純な js コード スニペットを次に示します。

tinymce.triggerSave();
于 2012-05-02T09:02:17.683 に答える