jQuery 및 TinyMCE : 텍스트 영역 값이 제출되지 않음

jQuery 와 TinyMCE 를 사용하여 양식을 제출하고 있지만 Textarea 값이 게시되지 않는다는 점에서 직렬화에 문제가 있습니다.

다음은 코드입니다.

<form id="myForm" method="post" action="post.php">
    <textarea name="question_text" id="question_text" style="width:543px;height:250px;"></textarea>
</form>

언어 : lang-js

$('#myForm').submit(function() {
    $.ajax({
        type: 'POST',
        url: $(this).attr('action'),
        data: $(this).serialize(),
        success: function(data) {
            $('#result').fadeIn('slow');
            $('#result').html(data);
            $('.loading').hide();
        }
    })
    return false;
});

tinyMCE.init({
    // General options
    mode : "textareas",
    theme : "advanced",

    // Theme options
    theme_advanced_buttons1 : "bold,italic,underline,separator,image,separator,justifyleft,justifycenter,justifyright,jformatselect,fontselect,fontsizeselect,justifyfull,bullist,numlist,undo,redo,styleprops,cite,link,unlink,media,advhr,code,preview",
    theme_advanced_buttons2 : "",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_statusbar_location : "bottom",
    theme_advanced_resize_horizontal : false,
    theme_advanced_resizing : true,
    extended_valid_elements :"a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",
});

게시 된 텍스트 영역의 값을 얻기 위해 변경해야하는 사항과 이유를 설명해 주시겠습니까?

양식을 제출하기 전에 tinyMCE.triggerSave();

다음과 같이 TinyMCE를 구성하여 TinyMCE 편집기를 통해 변경 될 때 숨겨진 텍스트 영역의 값을 동기화 상태로 유지할 수 있습니다.

tinymce.init({
    selector: "textarea",
    setup: function (editor) {
        editor.on('change', function () {
            editor.save();
        });
    }
});

textarea 요소는 자동으로 최신 상태로 유지되며 양식을 직렬화하기 전에 추가 단계가 필요하지 않습니다.

이것은 TinyMCE 4.0에서 테스트되었습니다.

데모 실행 : http://jsfiddle.net/9euk9/49/

업데이트 : 위 코드는 DOOManiac의 의견에 따라 업데이트되었습니다.

에서 TinyMCE에, jQuery를와 Ajax 형태 :

TinyMCE 양식 제출

• 텍스트 영역이 TinyMCE로 대체되면 실제로 숨겨지고 대신 TinyMCE 편집기 (iframe)가 표시됩니다.

• 그러나 양식이 제출 될 때 전송되는 것은이 텍스트 영역의 내용입니다. 따라서 양식 제출 전에 해당 내용을 업데이트해야합니다.

• 표준 양식 제출의 경우 TinyMCE에서 처리합니다. Ajax 양식 제출의 경우 다음을 호출하여 수동으로 수행해야합니다 (양식 제출 전).

  tinyMCE.triggerSave();

$('form').bind('form-pre-serialize', function(e) {
    tinyMCE.triggerSave();
});

더 이상 텍스트 영역이 아니기 때문입니다. iframe (및 기타)으로 대체되고 직렬화 기능은 양식 필드에서만 데이터를 가져옵니다.

양식에 숨겨진 필드를 추가하십시오.

<input type="hidden" id="question_html" name="question_html" />

양식을 게시하기 전에 편집기에서 데이터를 가져 와서 숨겨진 필드에 넣으십시오.

$('#question_html').val(tinyMCE.get('question_text').getContent());

(양식을 정상적으로 게시 한 경우 편집기는 물론이 작업을 자체적으로 처리하지만 양식을 사용하지 않고 양식을 스크랩하고 데이터를 직접 전송하므로 양식의 onsubmit 이벤트가 트리거되지 않습니다.)

양식에서 ajax를 실행할 때 TinyMCE에 먼저 텍스트 영역을 업데이트하도록 지시해야합니다.

// TinyMCE will now save the data into textarea
tinyMCE.triggerSave(); 
// now grap the data
var form_data = form.serialize(); 

나는 사용했다 :

var save_and_add = function(){
    tinyMCE.triggerSave();
    $('.new_multi_text_block_item').submit();
};

이것이 당신이해야 할 전부입니다.

이렇게하면 텍스트 영역의 초점을 잃을 때 콘텐츠가 저장됩니다.

 setup: function (editor) {
                editor.on('change', function () {
                    tinymce.triggerSave();
                });

var text = tinyMCE.activeEditor.getContent();
$('#textareaid').remove();
$('<textarea id="textareaid" name="textareaid">'+text+'</textarea>').insertAfter($('[name=someinput]'));

또한 TinyMCE 용 jQuery 플러그인 및 패키지를 사용하여 이러한 종류의 문제를 해결할 수도 있습니다.

나는 잠시 동안이 문제가 있었고 triggerSave()작동하지 않았고 다른 방법도 없었습니다.

그래서 나는 나를 위해 일한 방법을 찾았습니다 (다른 사람들이 이미 triggerSave 등을 시도했을 수 있기 때문에 여기에 추가하고 있습니다 ...) :

tinyMCE.init({
   selector: '.tinymce', // This is my <textarea> class
   setup : function(ed) {
                  ed.on('change', function(e) {
                     // This will print out all your content in the tinyMce box
                     console.log('the content '+ed.getContent());
                     // Your text from the tinyMce box will now be passed to your  text area ... 
                     $(".tinymce").text(ed.getContent()); 
                  });
            }
   ... Your other tinyMce settings ...
});

당신이 당신의 양식을 제출 또는 무엇이든 할 때 당신이해야 할 횡령은 당신의 선택의 데이터입니다 (내 경우 : .tinymce)를 사용 $('.tinymce').text().

@eldar : '일반 모드'에서 실행되는 3.6.7에서 동일한 문제가 발생했습니다. triggerSave 또는 save () 둘 다 작동하지 않았습니다.

jQuery TinyMCE 플러그인으로 변경했으며 다른 작업을 수행 할 필요없이 현재 작동합니다. 나는 그들이 TinyMCE의 jQuery 버전에 대해 일종의 자동 triggerSave를 구현 한 라인을 따라 어딘가에 있다고 가정하고 있습니다.

나는 tinymce를 숨기고 () 텍스트 영역의 변경된 값이 누락 된 양식을 제출합니다. 그래서 이것을 추가했습니다.

$("textarea[id='id_answer']").change(function(){
    var editor_id = $(this).attr('id');
    var editor = tinymce.get(editor_id);
    editor.setContent($(this).val()).save();
});

그것은 나를 위해 작동합니다.

tinyMCE.triggerSave(); iFrame의 변경 사항을 텍스트 영역에 동기화하므로 정답 인 것 같습니다.

그래도 다른 답변에 추가하려면 왜 이것이 필요합니까? 나는 한동안 tinyMCE를 사용하고 있었고 양식 필드가 통과하지 못하는 문제가 발생하지 않았습니다. 몇 가지 조사 끝에 양식 요소 제출의 "자동 패치"로 밝혀졌으며 기본적으로 켜져 있습니다. http://www.tinymce.com/wiki.php/Configuration3x:submit_patch

기본적으로 미리 submit호출 하도록 재정의 triggerSave하지만 다른 항목에 의해 이미 재정의되지 않은 경우에만 submit :

if (!n.submit.nodeType && !n.submit.length) {
    t.formElement = n;
    n._mceOldSubmit = n.submit;
    n.submit = function() {
        // Save all instances
        tinymce.triggerSave();
        t.isNotDirty = 1;

        return t.formElement._mceOldSubmit(t.formElement);
    };
}

따라서 코드 (또는 다른 타사 라이브러리)의 다른 항목이을 엉망으로 submit만드는 경우 "자동 패치"가 작동하지 않으며을 호출해야합니다 triggerSave.

편집 : 그리고 실제로 OP의 경우 submit에는 전혀 호출되지 않습니다. ajax'd이므로 위에서 설명한 "자동 패치"를 우회합니다.

가장 먼저:

1. 페이지 (jquery.tinymce.min.js)에 tinymce jquery 플러그인을 포함해야합니다.

2. 간단하고 안전한 방법 중 하나는 사용하는 것입니다 getContent및 setContenttriggerSave와 함께. 예:

   tinyMCE.get('editor_id').setContent(tinyMCE.get('editor_id').getContent()+_newdata);
   tinyMCE.triggerSave();