Question

我正在使用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

您可以按照以下方式配置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的评论更新

Answer 3

那是因为它不再是textarea了。它被替换为iframe（和诸如此类），而serialize函数只从表单字段中获取数据。

向表单添加隐藏字段：

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

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

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

（如果您正常发布表单，编辑器当然会自行处理这个问题，但是当您在不使用表单的情况下自行搜索表单并自行发送数据时，表单上的onsubmit事件永远不会被触发。）< / p>

Answer 4

从 TinyMCE, jQuery and Ajax forms：

TinyMCE表格提交


当TinyMCE替换textarea时，它实际上是隐藏的，而是显示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

这将确保在您失去textarea焦点时保存内容

KAFKA_ADVERTISED_PORT

Answer 9

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

Answer 10

@eldar：3.6.7在'普通模式'下运行时遇到了同样的问题;并且triggerSave或save（）都没有工作。

我改为使用jQuery TinyMCE插件而无需做任何其他事情，现在正在使用它。我假设在某个地方，他们为jiny版本的TinyMCE实现了某种类型的auto triggerSave。

Answer 11

我有一段时间遇到这个问题而且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()）中获取数据。

Answer 12

我只是隐藏（）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();
});

它对我有用。

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

因此，如果您的代码（或其他第三方库）中的其他内容混淆了submit，则其“自动修补”将无效，因此需要调用triggerSave。

编辑：实际上在OP的情况下，submit根本没有被调用。因为它是ajax'd，所以它绕过了上面描述的“自动修补”。

Answer 14

首先：

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

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

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

jQuery和TinyMCE：textarea值不提交

14 个答案:

TinyMCE表格提交