TinyMCE 용 AJAX를 사용할 때 추가 양식 데이터를 얻으려면 어떻게해야합니까?

Question

"저장"플러그인과 ajax를 사용하여 tinyMCE 인스턴스가 포함 된 양식을 제출하려고합니다. 이 기사는 다음과 같은 방법으로 발견되었습니다. https://support.ephox.com/hc/en-us/articles/226358867-Save-using-AJAX

(기본적으로 기본 양식 제출을 대체하고 ajax를 사용하는 함수를 가리킴).

하지만 추가 양식 데이터를 가져 와서 tinyMCE 콘텐츠와 함께 제출하는 방법은 무엇입니까? 페이지에 같은 클래스가있는 여러 폼이 있으므로 jquery를 사용하여 필드 ID를 참조하는 것은 옵션이 아닙니다.

이 요구하는 또 다른 방법은 다음과 같습니다 어떻게 DOM 요소 기준으로 TinyMCE에 인스턴스를 얻을 내 아약스 호출 (내가 어떻게 아약스 호출에 TinyMCE에의 콘텐츠를 알고)에서 그들을 포함 하는가? 아니면 tinyMCE에서 "저장"플러그인을 사용하여 전체 양식을 제출할 수 있습니까? (기본적으로 전통적인 양식 제출 만 사용하고 jquery 함수에서 e.preventDefault를 사용하여 정상적인 양식 제출이 발생하지 않습니다)

다음은 제 양식의 한 예입니다. tinyMCE가 content_text 필드에서 인라인으로 실행됩니다. 아약스를 통해 전체 양식을 제출하기 위해 "저장"플러그인을 사용하려고하지만 가능하지는 않습니다.

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

    }); 
} 

    }); 

});