第一次單擊時CKEditor無法驗證JQUERY驗證

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

但是我不知道放在哪里？ 可以幫忙嗎？

UPDATE

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>