jQuery和TinyMCE:textarea值不提交

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

从 TinyMCE,jQuery和Ajax形式:

TinyMCE表格提交

• 当一个textarea被TinyMCE替换时,它实际上是隐藏的,而是显示TinyMCE编辑器(iframe).
• 但是,这是textarea的内容,在提交表单时发送.因此,必须在提交表单之前更新其内容.

• 对于标准表单提交,它由TinyMCE处理.对于Ajax表单提交,您必须通过调用(在提交表单之前)手动完成:

  tinyMCE.triggerSave();

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

Answer 4

那是因为它不再是textarea了.它被iframe替换(以及诸如此类),而serialize函数只从表单字段中获取数据.

向表单添加隐藏字段:

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

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

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

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

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

这将确保当您失去 textarea 的焦点时内容得到保存

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

Answer 8

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