CK编辑器再次验证

Question

我的HTML中有两个CKEditor（我是说多个ckeditor）。

我也使用Validate插件检查CKEditor是否为空，如果为空则显示错误。

验证可以完美地进行，但是它可以第二次验证，而它自己应该可以第一次验证。

我在这里检查了所有问题和答案，但没有帮助。

我创建了一个JS Fiddle 。

验证代码：

的HTML

<form action="" method="post" id="frmEditor">

    <p>
        <label for="editor1">
            Editor 1:
        </label>
        <textarea class="ckeditor" cols="80" id="editor1" name="editor1" rows="10"></textarea>
    </p>
    <p>

    </p>

    <p>
        <label for="editor1">
            Editor 2:
        </label>
        <textarea class="ckeditor" cols="80" id="editor2" name="editor2" rows="10"></textarea>
    </p>
    <p>
        <input type="submit" value="Submit">
    </p>

</form>

脚本

$(document).ready(function(){   
// validate signup form on keyup and submit
    $("#frmEditor").validate({
        ignore: [],
        debug: false,
        rules: {
            editor1:{
                required: true
            },
            editor2:{
                required: true
            }           
        },
        messages: {         
            editor1: {
                required: "Please enter"
            },
            editor2: {
                required: "Please enter"
            }           
        },
        submitHandler: function(form) {
            form.submit();
        }       
    });
});

Answer 1

验证执行之前，您需要更新实例。 所以首先像这样在按钮上添加一个id属性或类

<input type="submit" value="Submit" id="submitFormBtn">

现在在您的js代码中编写以下函数

$('#submitFormBtn').click(function () {
    CKEDITOR.instances.editor1.updateElement();
    CKEDITOR.instances.editor2.updateElement();
});

希望这会起作用。

Answer 2

jQuery.validator.setDefaults({
    ignore: [],
    // with this no hidden fields will be ignored E.g. ckEditor text-area
});

我观察到验证正在进行第二次提交。 原因是， ckEditor隐藏了实际的文本区域，并将iframe用作编辑器实例，并在提交时将内容推入文本区域。 这意味着，对TextArea的验证会针对过时的数据进行触发。 要解决此问题，我将在编辑器实例的文本更改中更新TextArea 。

    for (instance in CKEDITOR.instances) {
        CKEDITOR.instances[instance].on('change', function ()
        {
            var editorName = $(this)[0].name;
            CKEDITOR.instances[editorName].updateElement();
        });
    }

Answer 3

我尝试了以下解决方案，它奏效了。

        <textarea name="txtDesc<?php echo $i;?>" id="txtDesc<?php echo $i;?>" class="ckeditor" rows="5" cols="17" ><?php echo $txtDesc?></textarea>
        <script>
         CKEDITOR.replace("txtDesc<?php echo $i;?>");
         CKEDITOR.add       
            //CKEDITOR.replace('txtDesc0'); 
        </script>   

如果只有1个ckEditor

for (instance in CKEDITOR.instances) {

    CKEDITOR.instances[instance].on("instanceReady", function () {

        //set keyup event
        this.document.on("keyup", function () { CKEDITOR.instances[instance].updateElement(); });
        //and paste event
        this.document.on("paste", function () { CKEDITOR.instances[instance].updateElement(); });

    });
}                                   

如果有超过1个ckEditor（以我为例2）

CKEDITOR.instances["txtDesc0"].on("instanceReady", function () {
this.document.on("keyup", function () { CKEDITOR.instances["txtDesc0"].updateElement(); });
this.document.on("paste", function () { CKEDITOR.instances["txtDesc0"].updateElement(); });
this.document.on("cut", function () { CKEDITOR.instances["txtDesc0"].updateElement(); });
});

CKEDITOR.instances["txtDesc1"].on("instanceReady", function () {
this.document.on("keyup", function () { CKEDITOR.instances["txtDesc1"].updateElement(); });
this.document.on("paste", function () { CKEDITOR.instances["txtDesc1"].updateElement(); });
this.document.on("cut", function () { CKEDITOR.instances["txtDesc1"].updateElement(); });
});