代码之家 › 专栏 › 技术社区 › fabien7474 Jan Tchärmän

如何从ckeditor提交表单文本区域输入?

jquery-forms-plugin html-form ckeditor jquery javascript

fabien7474 Jan Tchärmän · 技术社区 · 15 年前

我正在使用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 回复 | 直到 9 年前

134

Gabriele Petrioli 9 年前

您需要首先调用以下内容,以使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();
}

Besnik hsz 13 年前

这对我最有效: BeforeSerialize回调

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

Besnik hsz 13 年前

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

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

  // ... other options
});

Milan Saha 10 年前

在我的例子中,下面的内容帮助了我,我只是在描述表单之前使用这两行。

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

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

EugeneEunice 12 年前

我试过这样的方法:

首先,我必须在@html.begininform上输入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>

Omu 14 年前

我就是这样做的:

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

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