TinyMCE model binding on postback

Question

I'm trying to use the TinyMCE editor in an MVC3 project of mine. I have it displaying and working fine in the browser but can't get the data in it to postback with the form.

My view (snippet):

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

Without TinyMCE, the Conditions field will render as a textarea. With TinyMCE it overlays that textarea with its own stuff and that seems to be where the problem is. The original textarea is there but it has been set to display:none. TinyMCE has made put a copy of the field contents between some tags and that appears to be where the edited content resides. When I post the form back the original textarea still contains the field contents from the orignal response, not the edited content that should be passed back.

Here is what the rendered code looks like (in Firebug) with TinyMCE:

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

Is there something I should be doing to cause TinyMCE to update the original textarea with the edited content prior to postback?

In my experience TinyMCE does exactly as you intend by default (place the updated value into the POST data for Conditions). Are you using a standard <input type="submit" /> or doing anything special via JavaScript that might be getting in the way? — medkg15
Actually, I'm using Ajax.BeginForm to build the form. I'm using a standard <input type="submit"> to post it. — BKahuna
I looked and I do trap the click event for the submit button. When I remove the click handler and allow "normal" operation of the submit button it all works fine. Medkg - if you want to write your comment up as an answer I'll be glad to accept it. Thanks for your help. — BKahuna

Thariama Thariama · Accepted Answer · 2012-05-02T09:02:17

The solution is simple. You need to issue a little piece of javascript in order to write the contents back from the editor to the root html element (the textarea). Usually there are some browser events that trigger the writing back function, but it looks like those do not get fired for any reason. Here is the simple js-code snippet you need to call before you send the form to the server:

tinymce.triggerSave();

TinyMCE model binding on postback

1 Answers