如何在使用AJAX提交TinyMCE時獲得額外的表單數據？

我想使用「保存」插件和ajax提交包含tinyMCE實例的表單。我發現這篇文章如何：https://support.ephox.com/hc/en-us/articles/226358867-Save-using-AJAX 如何在使用AJAX提交TinyMCE時獲得額外的表單數據？

（基本上就覆蓋正常的表單提交，並將其指向使用Ajax的功能）。

但我怎麼會抓住更多的表單數據，並與TinyMCE的內容提交相處？我有多個表單在頁面上具有相同的類，所以使用jquery引用一個字段ID不是一個選項。

問這個的另一種方法是：如何獲取DOM元素相對到TinyMCE的實例，包括他們在我的Ajax調用（我知道如何讓TinyMCE的內容爲Ajax調用）？或者，我如何使用tinyMCE中的「保存」插件提交整個表單？（默認情況下它只是使用傳統的表單提交，並在jQuery函數使用e.preventDefault不能維持正常的表單提交的發生）

下面是我的形式的一個例子。 tinyMCE在content_text字段上內聯觸發。我試圖使用「Save」插件通過ajax提交整個表單，但不確定這是可能的。

<form class="inline-content-form" class="form-horizontal" role="form" method="POST" action="{{ url('/contents/'. $topContent->id) }}"> 
{!! csrf_field() !!} 

<input type="hidden" name="_method" value="PUT"> 

<input type="hidden" class="form-control" name="content_id" id="content_id" value="123"> 

<div class='content_text'></div> 

<button type="submit" class="btn btn-primary btn-sm update_button" style="display:none"><i class="fa fa-btn fa-refresh"></i>Update/button> 
</form>

來源

2017-05-19 Ben Wilson

這可能不是最佳選擇，但我想出瞭解決此問題的一種解決方法，以防其他人陷入困境。我用我的文字區域點擊事件發起TinyMCE的，則可以使用正常的jQuery選擇（通過parent()等）搶其他表單元素和數據;示例代碼：

$(document).on('click', ".content_text", function() { 

selected_content_div_dom = $(this)[0]; 

selected_content_div = $(this); 

var contentData = { 
      '_token': '{{ csrf_token() }}', 
      '_method': $(this).parent().find('input[name=_method]').val(), 
    }; 


tinymce.init({ 
    target: selected_content_div_dom, 
    plugins: [ 
    'advlist autolink lists link image charmap print preview hr anchor pagebreak', 
    'searchreplace wordcount visualblocks visualchars fullscreen', 
    'save' 
    ], 
    toolbar: 'bold italic bullist numlist outdent indent link image save cancel', 
    save_enablewhendirty:false, 
    save_oncancelcallback: function() { console.log('Save canceled'); 
     tinyMCE.activeEditor.setProgressState(true); 
     $("#top_content").load("{{ url('/top_content') }}"); 
    }, 

    save_onsavecallback : function() { 

     tinyMCE.triggerSave(); 

     contentData['content'] = tinyMCE.activeEditor.getContent(); 


     // process the form 
     $.ajax({ 
      method: "POST", // define the type of HTTP verb we want to use (POST for our form) 
      url: "{{ url('/contents/') }}" + "/" + content_id, // the url where we want to POST 
      data: contentData, // our data object 
      encode: true, 
      success: function(response){ // What to do if we succeed 
      console.log(response); 


      }, 
      error: function(jqXHR, textStatus, errorThrown) { // What to do if we fail 
      console.log("failed"); 
      console.log(JSON.stringify(jqXHR)); 
      console.log("AJAX error: " + textStatus + ' : ' + errorThrown); 
      } 

    }); 
} 

    }); 

});

來源

2017-05-22 21:01:07

如何在使用AJAX提交TinyMCE時獲得額外的表單數據？

回答

相關問題