使用TinyMCE的AJAX提交時如何獲取其他表單數據？

Question

我正在嘗試使用“保存”插件和ajax提交包含tinyMCE實例的表單。 我找到了有關以下內容的文章： https : //support.ephox.com/hc/en-us/articles/226358867-Save-using-AJAX

（基本上，您將覆蓋常規表單提交，並將其指向使用ajax的函數）。

但是，我將如何獲取其他表單數據並將其與tinyMCE內容一起提交？ 我在頁面上有多個具有相同類的表單，因此無法使用jquery引用字段ID。

提出此問題的另一種方式是：如何獲得相對於tinyMCE實例的DOM元素，並將其包含在我的ajax調用中（我知道如何將tinyMCE內容放入ajax調用中）？ 或者，如何使用tinyMCE中的“保存”插件提交整個表單？ （默認情況下，它僅使用傳統的表單提交，並且在jquery函數中使用e.preventDefault不會阻止正常的表單提交發生）

以下是我的表格的示例。 tinyMCE在content_text字段上內聯觸發。 我正在嘗試使用“保存”插件通過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>

Answer 1

這可能不是最佳選擇，但是我想出了一個解決此問題的方法，以防其他人掙扎。 我在我的文本區域上使用click事件來啟動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);
            }

    });
}

    });

 });