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

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

저는 jQuery와 TinyMCE를 사용하여 양식을 제출하고 있지만 Text area 값이 게시되지 않는 serialization에 문제가 있습니다.

코드는 다음과 같습니다.

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

Tiny MCE 편집기를 통해 변경할 때 숨겨진 텍스트 영역의 값을 동기화하도록 Tiny MCE를 다음과 같이 구성할 수 있습니다.

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

텍스트 영역 요소는 자동으로 최신 상태로 유지되며 양식을 일련화하기 전에 추가 단계가 필요하지 않습니다.

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

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

업데이트: 위의 코드는 DOManiac의 코멘트를 기반으로 업데이트되었습니다.

TinyMCE에서 jQuery와 Ajax는 다음을 형성합니다.

Tiny MCE 양식 제출

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

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

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

  tinyMCE.triggerSave();

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

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

숨김 필드를 양식에 추가합니다.

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

양식을 게시하기 전에 편집기에서 데이터를 가져와 숨겨진 필드에 입력합니다.

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

(양식을 정상적으로 게시한 경우 편집자가 이 작업을 수행하지만 양식을 사용하지 않고 직접 양식을 스크랩하고 데이터를 전송하면 양식의 제출 이벤트가 트리거되지 않습니다.)

양식에서 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]'));

나는 한동안 이 문제를 겪었고,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().

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

@eldar: 3.6.7이 '정상 모드'로 실행되는 경우에도 동일한 문제가 발생했습니다. 트리거Save 또는 Save()가 작동하지 않습니다.

나는 jQuery Tiny MCE 플러그인으로 변경했고 다른 작업을 할 필요 없이 지금 작동하고 있습니다.제 생각에 그들은 TinyMCE의 jQuery 버전을 위해 일종의 자동 트리거를 구현한 것 같습니다.

작은 쥐를 숨기고 양식을 제출하면 변경된 텍스트 값이 누락됩니다.그래서 다음과 같이 추가했습니다.

$("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에서 텍스트 영역으로 변경 사항을 동기화하기 때문에 정답인 것 같습니다.

하지만 다른 답변에 추가하자면 - 왜 이것이 필요합니까?저는 한동안 소형 MCE를 사용했고 양식 필드가 통과되지 않는 문제에 직면하지 않았습니다.몇 가지 조사 결과, 양식 요소 제출의 "자동 패치"로 판명되었으며, 이는 기본적으로 켜져 있습니다. - 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();
   

Ajax를 사용하여 양식 내용을 제출하는 올바른 방법은 다음과 같습니다.

$('#myForm').on('submit', function (e) {
    e.preventDefault();
    $.ajax({
        type: 'POST',
        url: $(this).attr('action'),
        data: new FormData(this),
        dataType: 'JSON',
        contentType: false,
        cache: false,
        processData: false,
        success: function(data) {
            $('#result').fadeIn('slow');
            $('#result').html(data);
            $('.loading').hide();
        }
    })
    return false;
});

이렇게 하면 TinyMCE 데이터를 포함한 모든 양식 데이터를 올바르게 제출할 수 있습니다.

언급URL : https://stackoverflow.com/questions/2122085/jquery-and-tinymce-textarea-value-doesnt-submit