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

Question

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

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

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

另一种提问方式是：如何将 DOM 元素 relative 获取到 tinyMCE 实例并将它们包含在我的 ajax 调用中（我知道如何将 tinyMCE 内容放入 ajax 调用）？或者，如何使用 tinyMCE 中的 "save" 插件提交整个表单？（默认情况下它只使用传统的表单提交，并且在 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>

Answer 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);
            }

    });
}

    });

 });

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

How can I get additional form data when using an AJAX submit for TinyMCE?

javascript

ajax

tinymce