在Wordpress中使用wp_editor时，序列化仅在第二次提交时返回完整的表单。

Question

我有一个表单，我正在尝试使用serialize将其转换为AJAX。只有当用户开始键入title字段时，大多数表单本身才由AJAX加载。

<form id="new_post" onsubmit="ajaxSubmit()">
    <input onclick="loadEditor()" class="editor" name="post_title" placeholder="Let us know what you're thinking - post something." />
    <div class="ajax_editor"></div>
</form>

下面是loadEditor的代码，它加载一个包含Wordpress‘TinyMCE编辑器的页面。

function loadEditor(preloaded) {
    if(preloaded!=true) {
        jQuery.ajax({url: "post-editor", success: function(result){
            jQuery(".editor").attr("onclick","");
            jQuery('.ajax_editor').addClass('active');
            jQuery(".ajax_editor").html(result);
            jQuery(".ajax_editor").fadeOut(0);
            jQuery(".ajax_editor").fadeIn(800);
        }})
    }
    else {
            jQuery(".ajax_editor").fadeIn(500);
    }
}

下面是ajaxSubmit的代码(目前只输出到控制台，而我正在测试它)。

function ajaxSubmit() {
    event.preventDefault();
    var form_elements = jQuery('#new_post').serialize();
    console.log( form_elements );
};

但是，当ajaxSubmit运行时，只有post_title传递给form_elements，而post_content则是空的。如果我第二次“提交”表单，它将包括所有预期的内容。

如果我然后编辑表单的内容并再次提交它，它的作用就好像什么都没有改变一样(form_elements日志到控制台，但显示了前面的post_content)；在进一步的提交中，它包含了新的post_content。

但是，如果更改post_title，表单总是正确地提交。

这是因为我已经将表单加载到两个部分，还是还有其他的工作呢？

Answer 1

这里实际上有两个问题，这两个问题都归结于WordPress生成的WordPress。

首先，我们处理的是一个可编辑的身体元素，而不是适当的形式输入，正如romuleald在评论中所发现的那样。

其次，该body元素实际上在iframe中，我从我最初的问题中忽略了这一点，因为我不想包含所有生成的html。

因此，我在表单中添加了一个名为"ajax_post_content“的输入元素，并将ajaxSubmit函数更改如下：

function ajaxSubmit() {
    event.preventDefault();
    var wp_editor_iframe = jQuery('#post_content_ifr');
    var post_contents = jQuery('#tinymce', wp_editor_iframe.contents())[0].innerHTML;
    var form_elements = jQuery('#new_post').serialize() + encodeURIComponent(post_contents);
    console.log(form_elements);             
}

这并不真正包括表单中的内容，而是将其附加到序列化变量中。

Answer 2

在调用$form.serialize()之前，需要调用tinyMCE.triggerSave()；

tinyMCE.triggerSave();
var data = $form.serialize();

Answer 3

当尝试从TinyMCE获取内容时，您应该使用它的api，因为没有直接插入到DOM中的输入。

来自正式的TinyMCE文档：

// Get content of a specific editor:
tinyMCE.get('content id').getContent() 
//          ^ use '#new_post' instead of 'content id'

这里的文档：TinyMCE - getContent