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

Program / 글쓴이

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