jQuery和TinyMCE：textarea的值不提交

我正在使用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]", }); 

你可以向我解释我应该改变什么，为什么，为了得到文本区域的价值张贴？

Answer 1

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

Answer 2

您可以按照以下方式configurationTinyMCE，以便在通过TinyMCE编辑器进行更改时使隐藏的textareas的值保持同步：

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

textarea元素将自动保持最新状态，在序列化表单之前不需要任何额外的步骤。

这已经在TinyMCE 4.0上testing过了

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

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

Answer 3

那是因为它不再是一个textarea。 它被replace为一个iframe（和whatnot），而serialize函数只从表单域获取数据。

添加一个隐藏的字段的forms：

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

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

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

（如果您正常发布表单，那么编辑器当然会自行处理这个事情，但是由于您在不使用表单的情况下自行发送表单并发送数据，表单上的onsubmit事件从不会触发。）

Answer 4

从TinyMCE，jQuery和Ajaxforms ：

TinyMCE表单提交

• 当一个textarea被TinyMCE取代时，它实际上被隐藏了，而TinyMCE编辑器（一个iframe）被显示出来了。
• 但是，这是表单提交时发送的这个textarea的内容。 因此，它的内容必须在表单提交之前更新。

• 对于标准的表单提交，它由TinyMCE处理。 对于Ajax表单提交，您必须通过调用（在提交表单之前）手动完成：

  tinyMCE.triggerSave();

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

Answer 5

当你在窗体上运行ajax时，你需要先告诉TinyMCE更新你的textarea：

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

Answer 6

我用了：

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

这是你需要做的。

Answer 7

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

Answer 8

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

Answer 9

@eldar：在“正常模式”下运行3.6.7时遇到同样的问题。 并且triggerSave或save（）都没有工作。

我更改为jQuery TinyMCE插件，而无需执行其他任何操作。 我假设沿线的某个地方，他们实施了一些自动triggerSave jQuery版本的TinyMCE。

Answer 10

我只是隐藏（）tinymce和提交表单，缺lesstextarea的改变的价值。 所以我补充说：

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

它适用于我。

Answer 11

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

要添加到其他答案虽然 – 为什么你需要这个？ 我一直在使用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，所以绕过了上述的“自动修补”。

Answer 12

我有这个问题一段时间， triggerSave()没有工作，也没有任何其他方法。

所以我find了一种方法为我工作（我在这里添加这个，因为其他人可能已经尝试了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').text()从你的select器（在我的情况下： .tinymce ）中获取数据。

Answer 13

首先：

1. 你必须在你的页面中包含tinymce jquery插件（jquery.tinymce.min.js）

2. 最简单和最安全的方法之一是使用getContent和setContent与triggerSave。 例：

    tinyMCE.get('editor_id').setContent(tinyMCE.get('editor_id').getContent()+_newdata); tinyMCE.triggerSave();