如何从CKEditor ajax-submit表单textarea输入?

时间:2010-07-15 14:28:11

标签: javascript jquery ckeditor html-form jquery-forms-plugin

我正在使用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参数;

我做错了什么或如何实现我的需要?

谢谢。

6 个答案:

答案 0 :(得分:137)

您需要先拨打以下内容,让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();
}

答案 1 :(得分:17)

这最适合我: beforeSerialize callback

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

答案 2 :(得分:8)

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

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

  // ... other options
});

答案 3 :(得分:6)

在我的情况下,以下内容帮助了我,我只是在使用表格之前使用这两行。

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

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

答案 4 :(得分:3)

我试过这样的事情:

首先,我必须输入一个id =&#34; #myForm&#34;在@Html.BeginForm之后,我将这些放在我的脚本部分,在我使用脚本的地方:

<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>

答案 5 :(得分:1)

我就是这样做的:

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

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