當通過jQuery「$ .post（...）」

POST時，TinyMCE不允許MVC控制器接收更新的HTML /文本我不確定我明白目前發生了什麼。我已經查看了一些關於它的信息，這些信息調用了Modal彈出窗口，其中包含一個editHtml的TextArea，這個類將觸發我的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: [email protected]()</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'); 
     } 
    } 
}); 

//...

在我上面的代碼，我在Modal窗口中有一個Save，這會觸發JQuery的'Save': function() {，但也注意到我h在我的cshtml上保存按鈕（用於測試），但這不是我想要使用的，但請注意，此保存按鈕在應用edithtml時工作正常。不確定這些信息是否有用，都提交給同一控制器。

當上述代碼示例中的所有內容都正常工作時，edithtml不在@Class中，控制器具有ViewModel，但Html的屬性是我想要更新值的原始值。其他視圖edithtml（不在Modal中）適用於TinyMCE。

我是否需要在初始化過程中告訴TinyMCE或自定義本節（$.post(editForm.attr('action'), editForm.serialize(), function (data) {）？

任何信息或反饋表示讚賞。

來源

2017-08-04 Derek

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

});

來源

2017-08-04 19:39:27 Derek

當通過jQuery「$ .post（...）」

回答

相關問題