TinyMCEはPOST時にjQuery "$。post（...）"を使ってMVC Controllerが更新されたHTML/Textを受け取ることを許可していません

Question

現時点で何が起こっているのか分かりません。モーダルポップアップを呼び出す情報が表示されています。TextAreaにはeditHtmlのクラスが含まれています。このクラスは私のTinyMCEエディタを起動させます。

モーダルMyView.cshtml：TinyMCEのため

@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：上記の私のコードで

//... 
$(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'); 
     } 
    } 
}); 

//... 

：モデルの保存に

@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を持っています私はSave on the Modalウィンドウを持っていますが、これはJQueryの'Save': function() {を起動しますが、h私のcshtml（テスト用）のSaveボタンを使っていますが、これは私が使いたいものではありませんが、このSaveボタンはedithtmlが適用されています。この情報が役立つかどうかは不明ですが、どちらも同じコントローラに送信してください。

edithtmlが@Classにない場合、コントローラにViewModelがありますが、Htmlのプロパティは、更新された値が必要な元の値です。 edithtml（モーダルではない）の他のビューは、TinyMCEが適用された状態で正常に動作します。

init中に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に。

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(); 
     }); 
    } 

});