jQuery 및 TinyMCE : 텍스트 영역 값이 적용되지 않음

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의 의견에 따라 업데이트되었습니다.

---

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

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

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

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

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

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

---

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

TinyMCE 양식 제출

• 텍스트 영역이 TinyMCE로 대체되면 실제로 숨겨지고 대신 TinyMCE 편집기 (iframe)가 표시됩니다.
• 그러나 양식이 제출 될 때 전송되는 것은이 텍스트 영역의 내용입니다. 따라서 양식 제출 전에 해당 내용을 업데이트해야합니다.

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

  tinyMCE.triggerSave();

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

---

양식에서 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();
};

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

---

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

---

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

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

---

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

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