Question

我正在尝试使用“save”插件和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中的“save”插件提交整个表单？（默认情况下，它只使用传统的表单提交，并且在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

这可能不是最佳选择，但我找到了解决这个问题的方法，以防其他人挣扎。我在textarea上使用了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);
            }

    });
}

    });

 });

在为TinyMCE使用AJAX提交时，如何获取其他表单数据？

1 个答案: