web-dev-qa-db-ja.com

CKEditorからフォームtextarea入力をajax送信するにはどうすればよいですか？

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>

残念ながら、AjaxリクエストはbodyTextパラメーターを渡さないようです。

何を間違えたのか、どうすれば必要なことを達成できますか？

ありがとうございました。

javascriptjqueryckeditorformsjquery-forms-plugin
50
fabien7474

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

これは私にとって最もうまく機能します：beforeSerializeコールバック

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

jQueryフォームプラグイン を使用する場合、beforeSubmitオプションを使用してより洗練されたソリューションを作成できます。

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

  // ... other options
});
8
Crewone

私の場合、次のことが助けになりました。フォームを封じる前にこれらの2行を使用するだけです。

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

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

私は次のようなものを試しました：

最初に@ 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>

そして、送信ボタンに対してこのようなことをしました=]、それは私のためにうまく動作し、それ以上送信を2回押すことはありません=]

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

私はこのようにしました：

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

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