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

Question

我在文本区域和 jQuery 验证插件上使用 CKEditor (http://bassistance .de/jquery-plugins/jquery-plugin-validation/)

使用 jQuery 插件，可以将字段标记为空或必填。 当“产品名称”等字段为空时，提交表单时该字段将被标记为无效。

但是，在输入“产品名称”时，该字段将在输入时自动标记为有效。太棒了，但我希望我的启用 CKEditor 的文本区域也能有同样的效果。在纯文本区域中一切都很好（当输入文本时，该字段变得有效），但是在将 CKEditor 添加到文本区域后，这不再起作用。

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

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

更新：

我尝试了您给我的线程中的解决方案，但它不起作用： 使用 jQuery 从 CKEditor 的 iframe 中抓取内容

I有：

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未定义”

我的文本的id是“page_content”

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

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

更新2：

这段代码是正确的，它从 CKEDITOR 获取数据到我的文本区域，但是我的验证插件仍然没有发生任何事情，它没有在 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 验证插件对文本区域或文本字段中的 keyup 事件做出反应，因此您需要在更新文本区域后触发该事件。

看看这个：

    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 文本区域以在失去焦点时写回 HTML，而不是在提交表单时写回 HTML（我认为这是默认情况下的做法）。

几天前有人提出了类似的问题，似乎已经成功，

Answer 3

无需做任何事情。

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

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

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

form.validate();