TinyMCE模型绑定回发

时间:2012-04-29 04:02:52

标签: asp.net-mvc-3 tinymce model-binding

我正在尝试在我的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,“条件”字段将呈现为textarea。使用TinyMCE,它用自己的东西覆盖textarea,这似乎是问题所在。原始textarea在那里,但它已设置为display:none。 TinyMCE已经在一些标签之间放置了一个字段内容的副本,这似乎是编辑内容所在的位置。当我发布表单时,原始文本区域仍然包含来自orignal响应的字段内容,而不是应该传回的已编辑内容。

以下是使用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在回发之前使用已编辑的内容更新原始textarea?

1 个答案:

答案 0 :(得分:3)

解决方案很简单。您需要发出一小段javascript才能将内容从编辑器写回根html元素(textarea)。通常有一些浏览器事件会触发回写功能,但看起来不会因为任何原因而被触发。以下是在将表单发送到服务器之前需要调用的简单js-code片段:

tinymce.triggerSave();