jQuery和TinyMCE:textarea值不'；不要屈服

我正在使用和提交表单，但序列化中存在一个问题，Textarea值无法发布

代码如下：

<form id="myForm" method="post" action="post.php">
    <textarea name="question_text" id="question_text" style="width:543px;height:250px;"></textarea>
</form>

---

你能给我解释一下我应该改变什么，为什么要改变，以便在文本区域中发布值吗？

这是因为它不再是文本区域了。它被一个iframe（以及诸如此类的东西）替换，序列化函数只从表单字段获取数据

将隐藏字段添加到表单：

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

---

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

您也可以简单地使用jQuery插件和TinyMCE软件包，它会解决这些问题。

提交表单之前，请调用

TinyMCE.triggerSave（）
我用过：

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

这就是你所需要做的。
来自
:

TinyMCE表格提交

当文本区域被TinyMCE替换时，它实际上是隐藏的，而TinyMCE编辑器（iframe）则显示出来


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


对于标准表单提交，由TinyMCE处理。对于Ajax表单提交，您必须手动执行，方法是（在提交表单之前）调用：

tinyMCE.triggerSave（）



@艾尔达：我在“正常模式”下运行3.6.7时遇到了同样的问题；triggerSave和save（）都不起作用

我改用jQueryTinymce插件，不用做任何其他事情，它现在可以工作了。我假设他们在某个地方为TinyMCE的jQuery版本实现了某种自动触发保存；
var text = tinyMCE.activeEditor.getContent();
$('#textareaid').remove();
$('<textarea id="textareaid" name="textareaid">'+text+'</textarea>').insertAfter($('[name=someinput]'));

$（'#textareaid'）。删除（）；
$（''+text+''）.insertAfter（$（'[name=someinput]'）；

我只是隐藏了tinymce and submit表单，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，以便在通过TinyMCE编辑器进行更改时保持隐藏文本区域的值同步：

tinymce.init({
    selector: "textarea",
    setup: function (editor) {
        editor.on('change', function () {
            editor.save();
        });
    }
});

textarea元素将自动保持最新，在序列化表单等之前，您不需要任何额外的步骤

这已经在TinyMCE 4.0上进行了测试

演示运行于：

更新：上面的代码已经根据DOOManiac的评论更新了

tinyMCE.triggerSave（）

似乎是正确的答案，因为它会将iFrame的更改同步到您的文本区域

但要补充其他答案，你为什么需要这个？我已经使用tinyMCE一段时间了，没有遇到表单字段无法通过的问题。经过一些研究，结果证明是他们对表单元素提交的“自动修补”，默认情况下是打开的-

基本上，它们会预先重新定义

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的，所以它绕过了上面描述的“自动修补”。

首先：

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

最简单、最安全的方法之一是将

getContent

和

setContent

与triggerSave一起使用。例如：

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

---

我有一段时间遇到这个问题，

triggerSave（）

不起作用，其他任何方法也不起作用

所以我找到了一种对我有效的方法（我在这里添加这个，因为其他人可能已经尝试过triggerSave等等）：

tinyMCE.init({
选择器：'.tinymce'，//这是我的类
设置：功能（ed）{
教育署署长（‘更改’，职能（e）{
//这将打印出tinyMce框中的所有内容
log（'content'+ed.getContent（））；
//tinyMce框中的文本现在将传递到文本区域。。。
$（“.tinymce”）.text（ed.getContent（））；
});
}
…您的其他tinyMce设置。。。
});

---

当您提交表单或其他任何操作时，您所要做的就是使用

$（'.tinymce'）.text（）从选择器（在我的例子中：
.tinymce
）获取数据。在表单上运行ajax时，您需要告诉tinymce首先更新您的文本区域：

//TinyMCE现在将数据保存到textarea中
tinyMCE.triggerSave（）；
//现在绘制数据图
var form_data=form.serialize（）；
这将确保在文本区域失去焦点时保存内容

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

我正在使用jquery ajaxForm插件执行此操作，而textarea值直到我的第二次提交才被传递，因此我认为您不能更改onsubmit处理程序中提交的数据。@Brenden:如果插件还使用onsubmit事件拦截表单，那么您必须确保先运行事件处理程序，否则，插件将在您有机会将数据从编辑器移动到表单字段之前收集表单中的数据。为什么要进行向下投票？如果您不解释您认为错误的地方，则无法改进答案。@Brenden我使用的是tinymce的3.5.8版本，在控制台中显示错误tinymce（）不是函数。我已经用eldar thingBest答案解决了我的问题，简短但甜蜜，也是最干净的解决方案。也适用于多个字段。只有
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);
    };
}

tinyMCE.get('editor_id').setContent(tinyMCE.get('editor_id').getContent()+_newdata);
tinyMCE.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 ...
});

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