jQuery 和 TinyMCE：textarea 值不提交
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2122085/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery and TinyMCE: textarea value doesn't submit
提问by Agus Puryanto
I am using jQueryand TinyMCEto submit a form, but there is a problem in serialization in that the Textarea value doesn't post.
我正在使用jQuery和TinyMCE提交表单，但序列化存在问题，因为 Textarea 值不发布。
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
语言：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?
你能向我解释我应该改变什么，为什么，为了获得发布的文本区域中的值？
回答by eldar
Before submitting the form, call tinyMCE.triggerSave();
提交表格前，请致电 tinyMCE.triggerSave();
回答by Dan Malcolm
You can configure TinyMCE as follows to keep the values of hidden textareas in sync as changes are made via TinyMCE editors:
您可以按如下方式配置 TinyMCE，以使隐藏文本区域的值在通过 TinyMCE 编辑器进行更改时保持同步：
tinymce.init({
selector: "textarea",
setup: function (editor) {
editor.on('change', function () {
editor.save();
});
}
});
The textarea elements will be kept up to date automatically and you won't need any extra steps before serializing forms etc.
textarea 元素将自动保持最新，并且在序列化表单等之前您不需要任何额外的步骤。
This has been tested on TinyMCE 4.0
这已经在 TinyMCE 4.0 上测试过了
Demo running at: http://jsfiddle.net/9euk9/49/
演示运行在：http: //jsfiddle.net/9euk9/49/
Update: The code above has been updated based on DOOManiac's comment
更新：上面的代码已经根据 DOOManiac 的评论进行了更新
回答by morgan
From TinyMCE, jQuery and Ajax forms:
TinyMCE Form Submission
- When a textarea is replaced by TinyMCE, it's actually hidden and TinyMCE editor (an iframe) is displayed instead.
- However, it's this textarea's contents which is sent when the form is submitted. Consequently its contents has to be updated before the form submission.
For a standard form submission , it's handled by TinyMCE . For an Ajax form submission, you have to do it manually, by calling (before the form is submitted):
tinyMCE.triggerSave();
TinyMCE 表格提交
- 当 textarea 被 TinyMCE 替换时，它实际上是隐藏的，而是显示 TinyMCE 编辑器（一个 iframe）。
- 但是，提交表单时发送的是此文本区域的内容。因此，必须在提交表单之前更新其内容。
对于标准表单提交，它由 TinyMCE 处理。对于 Ajax 表单提交，您必须手动完成，通过调用（在提交表单之前）：
tinyMCE.triggerSave();
$('form').bind('form-pre-serialize', function(e) {
tinyMCE.triggerSave();
});
回答by Guffa
That's because it's not a textarea any longer. It's replaced with an iframe (and whatnot), and the serialize function only gets data from form fields.
那是因为它不再是 textarea。它被 iframe（以及诸如此类的）替换，并且序列化函数仅从表单字段中获取数据。
Add a hidden field to the form:
向表单添加一个隐藏字段：
<input type="hidden" id="question_html" name="question_html" />
Before posting the form, get the data from the editor and put in the hidden field:
在发布表单之前，从编辑器中获取数据并放入隐藏字段：
$('#question_html').val(tinyMCE.get('question_text').getContent());
(The editor would of course take care of this itself if you posted the form normally, but as you are scraping the form and sending the data yourself without using the form, the onsubmit event on the form is never triggered.)
（如果您正常发布表单，编辑器当然会自行处理，但是由于您正在抓取表单并自己发送数据而不使用表单，因此永远不会触发表单上的 onsubmit 事件。）
回答by Kris Khairallah
When you run ajax on your form, you need to tell TinyMCE to update your textarea first:
当您在表单上运行 ajax 时，您需要先告诉 TinyMCE 更新您的 textarea：
// TinyMCE will now save the data into textarea
tinyMCE.triggerSave();
// now grap the data
var form_data = form.serialize();
回答by CyberNinja
This will ensure that the content gets save when you lose focus of the textarea
这将确保当您失去 textarea 的焦点时内容得到保存
setup: function (editor) {
editor.on('change', function () {
tinymce.triggerSave();
});
回答by Bob Roberts
I used:
我用了：
var save_and_add = function(){
tinyMCE.triggerSave();
$('.new_multi_text_block_item').submit();
};
This is all you need to do.
这就是您需要做的全部。
回答by Swyst
var text = tinyMCE.activeEditor.getContent();
$('#textareaid').remove();
$('<textarea id="textareaid" name="textareaid">'+text+'</textarea>').insertAfter($('[name=someinput]'));
回答by SupaMonkey
@eldar: I had the same issue with 3.6.7 running in 'normal mode'; and neither triggerSave or save() were working.
@eldar：我在“正常模式”下运行 3.6.7 时遇到了同样的问题；并且 triggerSave 或 save() 都没有工作。
I changed to the jQuery TinyMCE plugin and without having to do anything else it's working now. I'm assuming somewhere along the line they implemented some kind of auto triggerSave for the jQuery version of TinyMCE.
我改用了 jQuery TinyMCE 插件，无需做任何其他事情就可以了。我假设他们在某个地方为 TinyMCE 的 jQuery 版本实现了某种自动 triggerSave。
回答by Spocke
You can also simply use the jQuery plugin and package for TinyMCE it sorts out these kinds of issues.
您也可以简单地使用 TinyMCE 的 jQuery 插件和包，它可以解决这些问题。
