如何从 CKEditor 提交表单 textarea 输入？答案

【问题标题】：How to ajax-submit a form textarea input from CKEditor?如何从 CKEditor 提交表单 textarea 输入？
【发布时间】：2011-03-16 10:50:09
【问题描述】：

我正在使用 CKEditor、jQuery 和 jQuery form plugin，我想通过 Ajax 查询提交 CkEditor 表单的内容。这是我的代码：

<form id="article-form" name="article-form" method="post" action="/myproject/save">
  <textarea name="bodyText" style="visibility: hidden; display: none;"></textarea>
  <script type="text/javascript">
    CKEDITOR.replace('bodyText');
  </script>

  <a onClick="$("#article-form").ajaxSubmit();">Submit</a>

</form>

不幸的是，Ajax请求似乎没有传递bodyText参数；

我做错了什么或者我怎样才能达到我的需要？

谢谢。

【问题讨论】：

本身不需要隐藏文本区域，CKEDITOR 会处理这个问题。如果 CKEDITOR 没有加载，用户仍然会得到一个输入字段。

标签： javascript jquery ckeditor forms jquery-forms-plugin

【解决方案1】：

您需要首先调用以下命令，以使 CKEDITOR 更新其相关字段..

for ( instance in CKEDITOR.instances )
    CKEDITOR.instances[instance].updateElement();

所以

HTML

<a onClick="CKupdate();$('#article-form').ajaxSubmit();">Submit</a>

和javascript

function CKupdate(){
    for ( instance in CKEDITOR.instances )
        CKEDITOR.instances[instance].updateElement();
}

【讨论】：

谢谢。我需要在哪里进行此调用：在 CKEDITOR.replace 之前或在 ajaxSubmit() 之前？
好的。当放置在 ajaxSubmit() 之前时，它可以工作。非常感谢
@fabien，我相信您的CKEDITOR.replace 应该将textarea 的名称作为参数，而不是form 的ID .. 所以它应该是CKEDITOR.replace('bodyText')
通过替换加载编辑器后，您可以添加此行>>> CKEDITOR.instances.textAreaClientId.on('blur', function(){CKEDITOR.instances.textAreaClientId.updateElement();}) ;

【解决方案2】：

这对我最有效：beforeSerialize 回调

$('form#description').ajaxForm({
    beforeSerialize:function($Form, options){
        /* Before serialize */
        for ( instance in CKEDITOR.instances ) {
            CKEDITOR.instances[instance].updateElement();
        }
        return true; 
    },
    // other options
});

【讨论】：

这是正确的。您需要在序列化之前执行此操作，否则您使用 updateElement() 更新的数据在您下次尝试序列化数据时才会更新。
非常感谢！！只有这对我有用，我同意#stormlifter
非常感谢！！只有这对我也有效。再次感谢。

【解决方案3】：

如果您使用jQuery form plugin，您可以使用 beforeSubmit 选项以获得更优雅的解决方案：

$("#form").ajaxForm({
    beforeSubmit:  function()
{
        /* Before submit */
    for ( instance in CKEDITOR.instances )
    {
        CKEDITOR.instances[instance].updateElement();
    }
},

  // ... other options
});

【讨论】：

【解决方案4】：

在我的情况下，以下对我有帮助，我只是在序列化表单之前使用这两行。

  for ( instance in CKEDITOR.instances )
       CKEDITOR.instances[instance].updateElement();

  var data = $('#myForm').serializeArray();

【讨论】：

【解决方案5】：

我尝试过这样的事情：

首先我必须在@Html.BeginForm 上放置一个 id = "#myForm"，然后我将它们放在我使用脚本的脚本部分中：

<script type="text/javascript">
    $(document).ready(function CKupdate() {
        $('#myForm').ajaxForm(function () {
            for (instance in CKEDITOR.instances) {
                CKEDITOR.instances[instance].updateElement();
            }
        });       
    });
</script>

然后我为我的提交按钮做了这样的事情 =] 对我来说效果很好，不再按两次提交 =]

<button type="submit" id="submitButton" onclick="CKupdate();$('#myForm').ajaxSubmit();">Submit</button>

【讨论】：

【解决方案6】：

我只是这样做的：

$('#MyTextArea').closest('form').submit(CKupdate);

        function CKupdate() {
            for (instance in CKEDITOR.instances)
                CKEDITOR.instances[instance].updateElement();
            return true;
        }

【讨论】：