如何Ajax提交从CKEditor的表单textarea输入？

我正在使用CKEditor，jQuery和jQuery form plugin，我想通过Ajax查询提交CkEditor表单的内容。这里是我的代码：如何Ajax提交从CKEditor的表单textarea输入？

<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参数;

我做错了什么或者我该如何实现我所需要的？

谢谢。

来源

2010-07-15 fabien7474

本身并不需要隐藏textarea，CKEDITOR会照顾到这一点。如果CKEDITOR未加载，比用户仍然获得输入字段。 – Lexib0y 2014-01-06 18:26:16

131

你需要先调用以下，使CKEDITORs更新自己的相关领域..

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(); 
}

来源

2010-07-15 14:31:30

谢谢。我需要在CKEDITOR.replace之前还是在ajaxSubmit（）之前放置此调用？ – fabien7474 2010-07-15 14:34:08

@fabien，更新了答案 – 2010-07-15 14:34:51

好的。它在放在ajaxSubmit（）之前时工作。非常感谢 – fabien7474 2010-07-15 14:36:05

我只是做了这样的：

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

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

来源

2011-04-22 07:28:16 Omu

如果使用jQuery form plugin，您可以使用beforeSubmit选择一个更优雅的解决方案：

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

    // ... other options 
});

来源

2011-08-01 12:58:03 Crewone

这个工作对我来说最好的：beforeSerialize回调

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

来源

2012-02-10 09:11:13

这是正确的。您需要在执行串行化之前完成此操作，因为否则使用updateElement（）更新的数据将在下次尝试序列化数据之前不会更新。 – stormlifter 2012-07-09 15:35:51

非常感谢！只有这对我有用，我同意#stormlifter – Besnik 2012-09-13 09:54:28

非常感谢！只有这也适用于我。再次感谢。 – Kavin 2014-11-16 11:35:01

在我的情况下，以下帮助我，我只是在seializing表单之前使用这两行。

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

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

来源

2012-07-12 10:08:29

我想是这样的：

首先，我只好把对@ 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>

来源

2012-12-03 10:55:36 EugeneEunice

如何Ajax提交从CKEditor的表单textarea输入？

回答

相关问题