jQuery and TinyMCE: textarea value doesn't submit

I am using jQuery and TinyMCE to submit a form, but there is a problem in serialization in that the Textarea value doesn't post.

Here is the code:

<form id="myForm" method="post" action="post.php">
<textarea name="question_text" id="question_text" style="width:543px;height:250px;"></textarea>
</form>

language: 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]",
});

Can you explain to me what I should change, and why, in order to get the value in the text area posted?

121897 次浏览
小开

那是因为它不再是一个文本区了。它被替换为一个 iframe (以及诸如此类的东西) ，序列化函数只从表单字段获取数据。

Add a hidden field to the form:

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

在发布表单之前，从编辑器获取数据并将其放入隐藏字段:

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

(如果您正常发布表单，编辑器当然会自己处理这个问题，但是由于您在不使用表单的情况下刮取表单并自己发送数据，因此表单上的 oncommit 事件永远不会被触发。)

小开

你也可以简单地使用 TinyMCE 的 jQuery 插件和包来解决这些问题。

小开

在提交表单之前，请调用 tinyMCE.triggerSave();

小开

我用:

var save_and_add = function(){
tinyMCE.triggerSave();
$('.new_multi_text_block_item').submit();
};

这就是你要做的。

小开

从 TinyMCE，jQuery 和 Ajax 表单 :

提交 TinyMCE 表格

  • When a textarea is replaced by TinyMCE, it's actually hidden and TinyMCE editor (an iframe) is displayed instead.

  • 然而，正是这个文本区的内容在表单提交时被发送。因此，在提交表单之前必须更新其内容。

  • 对于标准的表单提交，它由 TinyMCE 处理。对于 Ajax 表单提交，必须手动执行，方法是调用(在表单提交之前) :

    tinyMCE.triggerSave();

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

@ eldar: 我在“正常模式”下运行3.6.7时遇到了同样的问题; 而且 triggerSave 或 save ()都不能正常工作。

我改用了 jQueryTinyMCE 插件，现在它可以正常工作了。我假设他们实现了某种类型的自动触发器为 TinyMCE 的 jQuery 版本保存。

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

我只是隐藏了 tinymce 并提交表单，文本区域的改变值丢失了，所以我添加了以下内容:

$("textarea[id='id_answer']").change(function(){
var editor_id = $(this).attr('id');
var editor = tinymce.get(editor_id);
editor.setContent($(this).val()).save();
});

对我有用。

小开

You can configure TinyMCE as follows to keep the values of hidden textareas in sync as changes are made via TinyMCE editors:

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

Textarea 元素将自动更新，并且在序列化表单之前不需要任何额外的步骤。

这已经在 TinyMCE 4.0上进行了测试

演示运行在: http://jsfiddle.net/9euk9/49/

更新: 上面的代码已经根据 DOOManiac 的评论进行了更新

小开

tinyMCE.triggerSave();似乎是正确的答案，因为它将同步从 iFrame 到您的文本区的变化。

为了补充其他的答案-你为什么需要这个？我已经使用 tinyMCE 有一段时间了，没有遇到表单字段无法通过的问题。经过一些研究，结果是他们的“自动补丁”的形式元素提交，这是默认打开的-http://www.tinymce.com/wiki.php/Configuration3x:submit_patch

基本上，他们重新定义了 submit，以便事先调用 triggerSave，但是 only if 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 的，这是绕过“自动补丁”上述。

小开

首先:

  1. 必须在页面中包含 tinymce jquery 插件(jquery.tinymce.min.js)

  2. 最简单和最安全的方法之一是使用 getContent和 setContent触发保存。例如:

    tinyMCE.get('editor_id').setContent(tinyMCE.get('editor_id').getContent()+_newdata);
tinyMCE.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()获取数据。

小开

When you run ajax on your form, you need to tell TinyMCE to update your textarea first:

// TinyMCE will now save the data into textarea
tinyMCE.triggerSave();
// now grap the data
var form_data = form.serialize();
小开

这将确保在失去文本区的焦点时保存内容

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

提交答案