jQuery 和 TinyMCE：textarea 值不提交答案

【问题标题】：jQuery and TinyMCE: textarea value doesn't submitjQuery 和 TinyMCE：textarea 值不提交
【发布时间】：2010-01-23 04:11:34
【问题描述】：

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

您能否向我解释一下我应该更改哪些内容以及为什么要在发布的文本区域中获取值？

【问题讨论】：

见：stackoverflow.com/a/64599372/7186739

标签： jquery tinymce

【解决方案1】：

提交表格前，请致电tinyMCE.triggerSave();

【讨论】：

在表单的 onSubmit 处理程序中使用 TinyMCE 3.2+ 和 jquery 插件：$('#textarea_id').tinymce().save();。
@Brenden 我正在使用 3.5.8 版本的 tinymce，在控制台中显示错误 tinymce() 不是函数。我已经解决了我的 eldar 问题
最佳答案，简短但甜蜜，也是最干净的解决方案。也适用于多个字段。唯一的缺点是这会触发 all 元素的保存。
tinymce.init({ selector:'textarea' });
Dan Malcolm 有当前版本的最佳答案 - 请参阅下面的帖子 - 需要 70 多个支持才能首先列出。

【解决方案2】：

您可以如下配置 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 的评论进行了更新

【讨论】：

很好，现在可以使用了。我不明白为什么编辑器的文档中没有提到这样的事情。
tinemce.triggerSave() 为所有活动编辑器调用 save() 函数。如果你有不止一个，像这样设置你的 onChange 函数更有效：editor.on('change', editor.save);
@DooManiac - 好电话，谢谢。答案和 jsfiddle 已更新。我在回调中保留了匿名函数，以确保将 save 作为编辑器对象的方法调用。
在 4.1.0 以上的 tinymce 版本中存在一个错误，带有粗体和斜体按钮，未直接为其添加“mce-active”类（但仅在 textarea 字段中键入几个字符后) - 因此按钮看起来没有激活...有线... (jsfiddle.net/9euk9/304)
很好的解决方案！

【解决方案3】：

从 TinyMCE, jQuery and Ajax forms:

TinyMCE 表单提交

当一个 textarea 被 TinyMCE 替换时，它实际上是隐藏的，而显示的是 TinyMCE 编辑器（一个 iframe）。

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

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

tinyMCE.triggerSave();

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

【讨论】：

【解决方案4】：

那是因为它不再是文本区域了。它已被 iframe（等等）取代，并且序列化函数仅从表单字段中获取数据。

在表单中添加隐藏字段：

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

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

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

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

【讨论】：

我正在使用 jquery ajaxForm 插件执行此操作，并且 textarea 值在我第二次提交之前不会传递，所以我认为您无法更改 onsubmit 处理程序中提交的数据。
@Brenden：如果插件也使用 onsubmit 事件来拦截表单，那么你必须确保你的事件处理程序首先运行，否则插件会在你之前从表单中收集数据有机会将编辑器中的数据移动到表单字段中。
为什么投反对票？如果你不解释你认为错的地方是什么，就无法改进答案。

【解决方案5】：

当您在表单上运行 ajax 时，您需要先告诉 TinyMCE 更新您的 textarea：

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

【讨论】：

【解决方案6】：

我用过：

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

这就是你需要做的。

【讨论】：

【解决方案7】：

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

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

【讨论】：

【解决方案8】：

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

【讨论】：

使用 tinyMCE.activeEditor.getContent() 是我唯一可以工作的东西。谢谢！

【解决方案9】：

我有一段时间遇到这个问题，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').text() 从选择器中获取数据（在我的例子中为：.tinymce）。

【讨论】：

【解决方案10】：

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

【讨论】：

【解决方案11】：

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

我更改为 jQuery TinyMCE 插件，无需做任何其他事情，它现在正在工作。我假设他们为 jQuery 版本的 TinyMCE 实现了某种自动 triggerSave。

【讨论】：

有趣的发现。我相信你的意思是 3.5.7 版？我刚刚用 3.5.7 和 3.5.8 做了一些测试，tinyMCE.triggerSave() 在正常模式下对我来说实际上工作得很好。但是你是正确的，在 jquery 模式下已经有某种自动保存，这与 tinymce.com/wiki.php/Plugin:autosave 相矛盾：“这个插件很可能在未来被扩展以提供 AJAX 自动保存支持。”

【解决方案12】：

我只是 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();
});

它对我有用。

【讨论】：

【解决方案13】：

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);
    };
}

因此，如果您的代码（或其他第 3 方库）中的其他内容与 submit 发生冲突，它们的“自动修补”将不起作用，因此有必要调用 triggerSave。

编辑：实际上在 OP 的情况下，submit 根本没有被调用。由于它是 ajax 的，这就绕过了上面描述的“自动修补”。

【讨论】：

【解决方案14】：

首先：

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

最简单、最安全的方法之一是将getContent 和setContent 与triggerSave 一起使用。示例：

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

【讨论】：