jquery - 使用 Jquery 限制/计数 CKEditor 中的字符

Question

我正在使用 CKEditor 作为我的所见即所得编辑器，我需要在输入时监视和限制字符数我有一个适用于普通 TextArea 的 jquery 脚本

<script type ="text/javascript" language="javascript">
    function limitChars(textid, limit, infodiv) {
        var text = $('.' + textid).val();
        var textlength = text.length;
        if (textlength > limit) {
            $('#' + infodiv).html('You cannot write more then ' + limit + ' characters!');
            $('#' + textid).val(text.substr(0, limit));
            return false;
        }
        else {
            $('#' + infodiv).html('You have ' + (limit - textlength) + ' characters left.');
            return true;
        }
    }

    $(function() {

        $('.comment-1').keyup(function() {
            limitChars('comment-1', 1000, 'charlimitinfo-1');
        })
    });

</script>

但是，当将 textArea 替换为 CKEditor 时，这似乎不起作用，有什么想法吗？

Answer 1

您无法如此轻松地获取 ckeditor 的内容，例如使用 jquery 和 $("iframe").contents()... 因为当您的代码触发时 ckeditor 尚未准备好。因此，当编辑器的实例准备就绪时，您需要在事件上绑定(bind)一些函数。之后，去掉标签，修剪开头和结尾的空格，然后就可以开始计数了:)

    <input type="text" name="count" id="count" />
    <textarea id="ck"></textarea>
    <script type="text/javascript">
    $(document).ready(function()
    {
        var editor = CKEDITOR.replace('ck');
        editor.on("instanceReady", function(){
            this.document.on("keyup", ck_jq);
            this.document.on("paste", ck_jq);
        });

    });

    function ck_jq()
    {
        var len = CKEDITOR.instances['ck'].getData().replace(/<("[^"]*"|'[^']*'|[^'">])*>/gi, '').replace(/^\s+|\s+$/g, '');
        $("#count").val(len.length);
    }

    </script>

HTH:)