我不确定我是否理解目前发生了什么。 我查看了调用模态弹出窗口的信息，其中包含一个带有editHtml类的TextArea，该类将触发我的 TinyMCE 编辑器启动。
Modal 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 for 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');
}
}
});
//...
在上面的代码中，我在模态窗口上有一个保存，这将触发 JQuery 的'Save': function () {，但也注意到我的 cshtml 上有一个保存按钮(用于测试(，这不是我想使用的，但是，请注意，这个保存按钮确实适用于应用edithtml。 不确定此信息是否有帮助，两者都提交给同一个控制器。
当edithtml不在@Class中时，上述代码示例中的所有内容都可以正常工作，控制器具有 ViewModel，但Html的属性是原始值，我当然想要更新的值。 其他具有edithtml(不在模态中(的视图在应用的 TinyMCE 时正常工作。
我是否需要在初始化期间告诉TinyMCE一些事情或自定义此部分($.post(editForm.attr('action'), editForm.serialize(), function (data) {(？
任何信息或反馈将不胜感激。
事实证明，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();
});
}
});