如何使用CKEditor从文本区域输入ajax提交表单？

Question

我正在使用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参数;

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

谢谢。

- fabien7474

---

不需要隐藏文本区域，CKEDITOR会自动处理。如果CKEDITOR没有加载，则用户仍然可以获得输入字段。 - Lexib0y

Answer 1

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

- Gabriele Petrioli

---

谢谢。我需要把这个调用放在哪里：在CKEDITOR.replace之前还是在ajaxSubmit()之前？ - fabien7474

好的。当放置在ajaxSubmit()之前时，它可以工作。非常感谢。 - fabien7474

@fabien，我认为你的CKEDITOR.replace应该将textarea的名称作为参数，而不是form的ID。所以它应该是CKEDITOR.replace('bodyText')。 - Gabriele Petrioli

在通过替换加载编辑器后，您可以添加以下行 >>> CKEDITOR.instances.textAreaClientId.on('blur', function(){CKEDITOR.instances.textAreaClientId.updateElement();}); - Mhmd

Answer 2

对我来说这个方法最好用：beforeSerialize回调函数

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

- Pepa Chmel

---

这是正确的。你需要在 beforeSerialize 之前这样做，否则使用 updateElement() 更新的数据直到下一次尝试序列化数据之前都不会被更新。 - stormlifter

非常感谢！只有这个对我有效，我同意 #stormlifter 的观点。 - Besnik

非常感谢！！这确实也适用于我。再次感谢。 - Kavin

Answer 3

如果您使用jQuery表单插件，则可以使用beforeSubmit选项来实现更加优雅的解决方案：

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

  // ... other options
});

- Crewone

Answer 4

在我的情况下，以下内容对我有所帮助，我只是在序列化表单之前使用了这两行代码。

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

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

- Milan Saha

Answer 5

我尝试了以下内容：

首先，我必须在 @Html.BeginForm 上加上一个 id = "#myForm"，然后，我将以下脚本放在我的 scripts 部分中：

<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>

- EugeneEunice

Answer 6

我刚刚是这样做的：

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

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

- Omu