当 POST 通过 jQuery "$.post(...)" 时，TinyMCE 不允许 MVC 控制器接收更新的 HTML/Text

Question

我不确定我是否了解目前正在发生的事情。我查看了调用模态弹出窗口的信息，其中包含 TextArea 和 editHtml 的 class，此 class 将触发我的 TinyMCE 编辑器启动。

模态 MyView.cshtml:

@model x.Models.Content.Elements.ElementHtml

@Html.Partial("_Tools") //This calls the TinyMCE in the next code window

@using (Ajax.BeginForm("_Edit", "ElementHtmls", 
    new AjaxOptions
    {
        HttpMethod = "POST",
        OnSuccess = "alert('Updated');",
        OnFailure = "alert('Failed');",
        UpdateTargetId = "ElementUpdated_" + Model.Oid.ToString()
    },
    new { id = "ElementForm_" + Model.Oid.ToString() }
))
    {
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>ElementHtml</h4>
        <p>This: ElementForm_@Model.Oid.ToString()</p>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        @Html.HiddenFor(model => model.Oid)
        @Html.HiddenFor(model => model.Name)

        <div class="form-group">
            @*@Html.LabelFor(model => model.Html, htmlAttributes: new { @class = "control-label col-md-2" })*@
            <div class="col-md-12">

                //This is the editHtml
                //---
                @Html.EditorFor(model => model.Html, new 
                    { htmlAttributes = new { @class = "form-control edithtml" } }
                )
                //---

                @Html.ValidationMessageFor(model => model.Html, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Save" class="btn btn-default" />
            </div>
        </div>
    </div>
}

JavaScript 对于 TinyMCE：

@Scripts.Render("~/Scripts/tinymce/jquery.tinymce.min.js")
@Scripts.Render("~/Scripts/tinymce/tinymce.min.js")

<script type="text/javascript">
    tinymce.init({
        selector: 'textarea.edithtml',
        branding: false,
        height: 250,
        menubar: false,
        plugins: [
            'advlist autolink lists link image charmap print preview anchor',
            'searchreplace visualblocks code fullscreen',
            'insertdatetime media table contextmenu paste code',
            'code'
        ],
        toolbar: 'undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | code',
        content_css: "/Content/bootstrap.css"
    });
</script>

保存模型时，我有以下 javascript：

//...
$(dialog).dialog({
    title: title,
    //...
    buttons: {
        'Save': function () {
            var editForm = $(form);
            if (editForm.valid()) {

                $.post(editForm.attr('action'), editForm.serialize(), function (data) {
                    if (data.Error != undefined && data.Error != '') {
                        console.log("Data error: " + data.Error);
                    }
                    else {
                        $(dialog).dialog('close');
                    }
                });

            }
        },

        'Cancel': function () {
            $(this).dialog('close');
        }
    }
});

//...

在我上面的代码中，我在模态 window 上有一个保存，这将触发 JQuery 的 'Save': function () {，但还要注意我在我的 JQuery 上有一个保存按钮cshtml（用于测试），这不是我想要使用的，但是请注意，此保存按钮确实适用于应用的 edithtml。不确定此信息是否有帮助，两者都提交给同一个控制器。

当 edithtml 不在 @Class 中时，上述代码示例中的所有内容都正常工作，控制器具有 ViewModel，但 Html 的属性是我当然想要更新值的原始值。 edithtml 的其他视图（不在模式中）与应用的 TinyMCE 一起正常工作。

我是否需要在初始化期间告诉 TinyMCE 一些事情或自定义此部分 ($.post(editForm.attr('action'), editForm.serialize(), function (data) {)？

欢迎提供任何信息或反馈。

Answer 1

事实证明 TinyMCE 没有直接编辑 TextArea，而是在对 JavaScript.

中的表单进行任何操作之前添加 tinyMCE.triggerSave();

使用更新代码的第一个答案：

//...
$(dialog).dialog({
    title: title,
    //...
    buttons: {
        'Save': function () {
            tinyMCE.triggerSave(); // <---- Added this to "save" to the TextArea
            var editForm = $(form);
            if (editForm.valid()) {

                $.post(editForm.attr('action'), editForm.serialize(), function (data) {
                    if (data.Error != undefined && data.Error != '') {
                        console.log("Data error: " + data.Error);
                    }
                    else {
                        $(dialog).dialog('close');
                    }
                });

            }
        },

        'Cancel': function () {
            $(this).dialog('close');
        }
    }
});

//...

第二个答案，更自动...

更进一步后，我能够避免更改上述代码并将 blur 事件添加到 tinyMCE.init:

tinyMCE.init({
    selector: 'textarea.edithtml',
    branding: false,
    height: 250,
    menubar: false,
    plugins: [
        'advlist autolink lists link image charmap print preview anchor',
        'searchreplace visualblocks code fullscreen',
        'insertdatetime media table contextmenu paste code',
        'code'
    ],
    toolbar: 'undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | code',
    content_css: "/Content/bootstrap.css",

    //Added the following (removing the .log once tested properly)
    init_instance_callback: function (editor) {
        editor.on('blur', function (e) {
            console.log('Editor was blurred!');
            tinyMCE.triggerSave();
        });
    }

});

当 POST 通过 jQuery "$.post(...)" 时，TinyMCE 不允许 MVC 控制器接收更新的 HTML/Text

TinyMCE isn't allowing MVC Controller to receive updated HTML/Text when POST through jQuery "$.post(...)"

html

ajax

asp.net-mvc

jquery

tinymce