Question

我在textarea上使用CKEditor和jQuery验证插件（http://bassistance.de/jquery-plugins/jquery-plugin-validation/）

使用jQuery插件，可以将字段标记为空或需要。当一个字段，例如“产品名称”为空，提交表单时该字段将被标记为无效。

但是，在输入“产品名称”时，该字段将在键入时自动标记为有效。这很好，但我希望在启用CKEditor的textarea中使用相同的功能。使用普通文本区域（当输入文本时，该字段变为有效）一切都很好用，但在将CKEditor添加到textarea之后，这不再起作用。

从那时起，您必须在重新验证CKEditor textarea之前单击提交按钮。

关于如何使这项工作的任何想法？

非常感谢您的帮助，stackoverflow在过去几天里提供了很大的帮助！

更新：

我尝试了你给我的线程的解决方案，但它不起作用： Using jQuery to grab the content from CKEditor's iframe

我有：

CKEDITOR.instances["page_content"].document.on('keydown', function(event)
                {
                    CKEDITOR.tools.setTimeout( function()
                    { 
                        $("#page_content").val(CKEDITOR.instances.page_content.getData()); 
                    }, 0);
        });

但是一直给我：“CKEDITOR.instances.page_content.document未定义”

我的textare的id是“page_content”

点击按钮后效果很好，但正如你所见，我需要以某种方式触发keydown事件

$("#btnOk").click(function(event) {
            CKEDITOR.instances.page_content.updateElement(); //works fine
});

更新2：

这段代码是正确的，它从CKEDITOR获取数据到我的textarea，但是，我的验证插件没有发生任何事情，它不是在CKEDitor中“响应我输入”，而它应该反应并说该字段是我输入一些文字时确定

CKEDITOR.instances["page_content"].on("instanceReady", function()
        {
                //set keyup event
                this.document.on("keyup", updateTextArea);
                 //and paste event
                this.document.on("paste", updateTextArea);

        });

        function updateTextArea()
        {
            CKEDITOR.tools.setTimeout( function()
                    { 
                        $("#page_content").val(CKEDITOR.instances.page_content.getData());
                    }, 0);  
        }

Answer 1

大家好，我已经修复了它，感谢您的提示：jquery验证插件对textarea或文本字段中的keyup事件做出反应，因此您需要在更新textarea后触发该事件。

检查出来：

    CKEDITOR.instances["page_content"].on("instanceReady", function()
    {
            //set keyup event
            this.document.on("keyup", updateTextArea);
             //and paste event
            this.document.on("paste", updateTextArea);

    });

    function updateTextArea()
    {
        CKEDITOR.tools.setTimeout( function()
                { 
                    $("#page_content").val(CKEDITOR.instances.page_content.getData());
                    $("#page_content").trigger('keyup');
                }, 0);  
    }

Answer 2

在提交表单时，您必须调整CKEditor textarea以在其失去焦点时回写HTML，而不是（我假设这是默认情况下执行的操作）。

有人在几天前有类似的问题，似乎已成功，check it out。

Answer 3

无需做任何事情。

第1步：重要提示：在提交前用实际内容更新CKEDITOR textarea

form.on('submit', function () {
        for (var instanceName in CKEDITOR.instances) {
            CKEDITOR.instances[instanceName].updateElement();
        }
    });

下一步：然后验证您的代码（必须是最后一步）

form.validate();

jQuery验证插件+ CKEditor - 输入时验证

3 个答案: