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