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

您能否向我解释我应该更改什么以及为什么更改，以便在文本区域中获得价值？

提交表格之前，请致电 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）。

• 但是，正是在提交表单时发送的是此textarea的内容。因此，必须在提交表单之前更新其内容。

• 对于标准表单提交，它由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();
                });

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

您也可以简单地使用TinyMCE的jQuery插件和软件包来解决此类问题。

我有一段时间这个问题了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()。

@eldar：我在3.6.7以“正常模式”运行时遇到了同样的问题；并且triggerSave或save（）均不起作用。

我改为使用jQuery TinyMCE插件，而无需执行任何其他操作即可正常工作。我假设他们沿线为TinyMCE的jQuery版本实现了某种形式的auto TriggerSave。

我只是hide（）tinymce并提交表单，丢失了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的更改同步到您的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，因此绕过了上述“自动修补”。

首先：

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

2. 最简单，最安全的方法之一是使用TriggerSave getContent并setContent与之一起使用。例：

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