如何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輸入？

回答

相關問題