当通过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（...）”

回答

相关问题