使用 TinyMCE 的 AJAX 提交时如何获取额外的表单数据？答案

【问题标题】：How can I get additional form data when using an AJAX submit for TinyMCE?使用 TinyMCE 的 AJAX 提交时如何获取额外的表单数据？
【发布时间】：2017-10-20 02:56:56
【问题描述】：

我正在尝试使用“保存”插件和 ajax 提交包含 tinyMCE 实例的表单。我找到了这篇关于如何的文章：https://support.ephox.com/hc/en-us/articles/226358867-Save-using-AJAX

（基本上你覆盖了正常的表单提交并将其指向一个使用 ajax 的函数）。

但是我如何获取额外的表单数据并将其与 tinyMCE 内容一起提交？我在页面上有多个具有相同类的表单，因此不能使用 jquery 引用字段 ID。

问这个问题的另一种方法是：如何将 DOM 元素 relative 获取到 tinyMCE 实例并将它们包含在我的 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>

【问题讨论】：

标签： javascript ajax tinymce

【解决方案1】：

这可能不是最佳的，但我想出了一个解决这个问题的方法，以防其他人遇到困难。我在我的文本区域上使用了一个点击事件来启动 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);
            }

    });
}

    });

 });

【讨论】：