Ответ 1
Перед отправкой формы вызовите tinyMCE.triggerSave();
Я использую 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 (и еще много чего), а функция serialize получает данные только от полей формы.
Добавьте скрытое поле в форму:
<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).
- Однако это содержимое textarea, которое отправляется при отправке формы. Следовательно, его содержимое должно быть обновлено до подачи формы.
Для стандартного представления формы он обрабатывается 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]'));
Вы также можете просто использовать плагин jQuery и пакет для TinyMCE, который сортирует эти проблемы.
@eldar: У меня была та же проблема, что и 3.6.7, работающая в "нормальном режиме"; и ни триггерSave, ни save() не работают.
Я перешел на плагин jQuery TinyMCE и без необходимости делать что-либо еще, что он работает сейчас. Я предполагаю, что где-то вдоль линии они реализовали какой-то автоматический triggerSave для jQuery-версии TinyMCE.
Я просто скрываю() форму timymce и submit, измененное значение textarea отсутствует. Поэтому я добавил следующее:
$("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
.
EDIT: И фактически в случае OP, submit
не вызывается вообще. Поскольку это ajax'd, это обходит "автоматическое исправление" , описанное выше.
Прежде всего:
Вы должны включить плагин tinymce jquery на вашей странице (jquery.tinymce.min.js)
Один из самых простых и безопасных способов - использовать getContent
и setContent
с triggerSave. Пример:
tinyMCE.get('editor_id').setContent(tinyMCE.get('editor_id').getContent()+_newdata);
tinyMCE.triggerSave();
У меня была эта проблема какое-то время, а 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()
.