使用 ajax 的 TinyMCE textarea 和 post 表单答案

【问题标题】：TinyMCE textarea and post form using ajax使用 ajax 的 TinyMCE textarea 和 post 表单
【发布时间】：2013-01-01 20:15:19
【问题描述】：

我将 tinyMCE 用于 textareas 并通过 AJAX 发布表单。

但是当我尝试保存 textarea 值时，它在第一次单击时采用旧值，但在第二次单击时采用更新值。

我尝试过使用tinyMCE.triggerSave()，但没有成功。

我也试过tinyMCE.get('myid').getContent()，但它仍然需要旧值。

我的代码如下。

    $(".submit").live("click", function () {
            tinyMCE.triggerSave();
            var f = $(this).parents("form");
            var action = f.attr("action");
            var serializedForm = f.serialize();
            //tinyMCE.triggerSave(); also tried putting here
            $.ajax({
                 type: 'POST',
                 url: action,
                 data: serializedForm,
                 async: false,
                 success: function (data, textStatus, request) {
                     $(".divform").html(data);
                 },
                 error: function (req, status, error) {
                     alert&("Error occurred!");
                 }
            });
    return false;
    });

请帮助，任何帮助将不胜感激

【问题讨论】：

工作解决方案：stackoverflow.com/a/64599372/7186739

标签： ajax tinymce save

【解决方案1】：

您可以如下配置 TinyMCE，以在通过 TinyMCE 编辑器进行更改时保持隐藏文本区域的值同步：

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

有了这个，您可以随时直接从 textarea 元素访问最新的值。

这已经在 TinyMCE 4.0 上测试过

演示运行在：http://jsfiddle.net/9euk9/

【讨论】：

不幸的是，它在 TinyMCE 3.x 上对我不起作用
@Pere - 我发布了一个适用于 TinyMCE 3.x 的替代答案
值得注意的是，在init 上添加editor.triggerSave() 对内联编辑器也很有用，因为相应的隐藏字段在加载时不会有值

【解决方案2】：

用这个代替tinymce.triggerSave();

$('#' + 'your_editor_id').html( tinymce.get('your_editor_id').getContent() );

【讨论】：

谢谢，但我使用了 tinyMCE.activeEditor.getContent() 并且它有效。感谢您的回复。
当然可以：tinymce.activeEditor 与您使用 tinyMCE.activeEditor 获得的编辑器实例相同。但请注意，tinymce.activeEditor 仅在用户单击编辑器时才被设置，否则它是未定义的，而 tinymce.get('your_editor_id') 将始终为您提供一个编辑器实例
我花了好几个星期才弄明白。 triggerSave() 似乎在 Firefox 中失败，原因我从未想过。
@BenPower 你有没有提到其他人有一个仅限 FF 的 triggerSave() 问题？我找不到其他有类似问题的人。
很棒的东西，非常有帮助

【解决方案3】：

Dan Malcolm 为 TinyMCE 3.x 发布的替代实现如下：

tinymce.init({
    selector: "textarea",
    setup: function (editor) {
        editor.onChange.add(function() {
            editor.save();
        });
    }
});

除了适用于 3.x 之外，此版本还使用 editor.save 而不是 tinymce.triggerSave，这意味着它只更新当前编辑器而不是页面中的所有编辑器。

【讨论】：

你是我的英雄，继续努力！

【解决方案4】：

在使用 Ajax 发布数据之前使用此脚本。这是使用前的javascript代码，请加载微小的mce js文件并使用它。

tinymce.triggerSave();

$.ajax({ 
    type: 'post', 
    url: 'autoSaveReport.php', 
    data: $('form').serialize(), 
    success: function (result) { 
        var redirectURL = window.location.pathname; 
        var redirectURL1 = redirectURL+"?incid="+result; 
        window.location = window.location+"?incid="+result; 
    } 
});

【讨论】：

【解决方案5】：

对我来说很好用

tinymce.triggerSave();

把它放在ajax帖子之前

【讨论】：

【解决方案6】：

@丹马尔科姆，

我注意到，当您在其中一个框中键入内容时，然后按“显示文本值”按钮，然后如果您单击“撤消”箭头，它只会保留已显示的文本，而不是由“撤消”。我在尝试使用您的示例检查文本编辑器中是否包含某些内容时发现了它。

在我的示例中，如果我在其中输入内容，然后执行“撤消”操作，它会删除其中的文本，但表单仍会提交。

请参见此处的示例：

enter code here

https://codepen.io/speedygonzales77/pen/bzMrqB

enter code here

【讨论】：

【解决方案7】：

我知道时间过去了，但我今天找到了这个解决方案。

在序列化表单之前，您必须使用方法保存编辑器：

tinymce.activeEditor.save();
var serializedForm = f.serialize();

也许这对某些同志有帮助。

【讨论】：