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

fab*_*474 50 javascript forms jquery jquery-forms-plugin ckeditor

我正在使用CKEditor,jQuery和jQuery表单插件,我想通过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>
Run Code Online (Sandbox Code Playgroud)

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

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

谢谢.

Gab*_*oli 138

你需要先调用以下内容,使CKEDITOR更新其相关字段.

for ( instance in CKEDITOR.instances )
    CKEDITOR.instances[instance].updateElement();
Run Code Online (Sandbox Code Playgroud)

所以

HTML

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

和javascript

function CKupdate(){
    for ( instance in CKEDITOR.instances )
        CKEDITOR.instances[instance].updateElement();
}
Run Code Online (Sandbox Code Playgroud)


Pep*_*mel 17

这最适合我:beforeSerialize回调

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


小智 8

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

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

  // ... other options
});
Run Code Online (Sandbox Code Playgroud)


Mil*_*aha 6

在我的情况下,以下帮助我,我只是在seial化表单之前使用这两行.

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

  var data = $('#myForm').serializeArray();
Run Code Online (Sandbox Code Playgroud)