Question

我正在将JQUERY验证与CKEDITOR集成。

这是我的HTML

<div class="clearfix"></div>
<div class="col-md-12">
    <div class="form-group">
        <label class="control-label col-md-2">Text<span class="required">*</span></label>
        <div class="col-md-8">
            <textarea name="text" id="editor1" class="form-control ckeditor" style="height:100px;"><?= $results[0]['text']; ?></textarea>
            <span class="help-block"></span>
        </div>
    </div>
</div>

这是我的页脚

<script src="<?= site_url('theme/black/assets/plugins/ckeditor/ckeditor.js') ?>" type="text/javascript"></script>
<script src="<?= site_url('theme/black/assets/plugins/ckeditor/styles.js') ?>" type="text/javascript"></script>
<script>
CKEDITOR.replace('editor');
</script>

这是我的Jquery验证代码

<script>

    $(document).ready(function () {

        $('#edit_banner').validate({
            errorElement: 'span',
            errorClass: 'error',
            focusInvalid: false,
            ignore: "",
            rules: {
                title: {
                    required: true
                },
                text: {
                    required: true
                },
                sort: {
                    required: true
                },
                show_on_dashboard: {
                    required: true
                }
            }
        });
    });

</script>

但问题是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(); });
    });
}

但我不知道该把它放在哪里？可以帮助吗？

更新

I made changes and put the code inside script tag but it is still not working

<script>

    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();
            });
        });
    }

    $(document).ready(function () {

        $('#edit_banner').validate({
            errorElement: 'span',
            errorClass: 'error',
            focusInvalid: false,
            ignore: "",
            rules: {
                title: {
                    required: true
                },
                text: {
                    required: true
                },
                sort: {
                    required: true
                },
                show_on_dashboard: {
                    required: true
                }
            }
        });
    });

</script>

Answer 1

很长一段时间我也遇到过这个问题。最后我发现脚本中有两个事件处理程序在一起工作我认为你的问题在这部分

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(); });
    });
}

根据您的需要删除一个事件处理程序...例如像

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

希望这可能会有所帮助..： - ）

Answer 2

我使用此代码解决了这个问题。

<script>
    $(document).ready(function () {
        jQuery.validator.addMethod("cke_required", function (value, element) {
            var idname = $(element).attr('id');
            var editor = CKEDITOR.instances[idname];
            $(element).val(editor.getData());
            return $(element).val().length > 0;
        }, "This field is required");

        $('#add_banner').validate({
            errorElement: 'span',
            errorClass: 'error',
            focusInvalid: false,
            ignore: "",
            rules: {
                text: {
                    cke_required: true
                },
                title: {
                    required: true
                },
                sort: {
                    required: true
                },
                show_on_dashboard: {
                    required: true
                },
                image: {
                    required: true
                }
            }
        });
    });

</script>

CKEditor在第一次单击时未验证JQUERY VALIDATING

2 个答案: