带有Jquery的CKEditor中的限制/计数字符

Question

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

<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在你的代码触发时没有准备好.因此,当编辑器的实例准备就绪时,您需要在事件上绑定一些函数.之后,删除标签,从开头和结尾修剪空白,计数可以开始:)

    <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 :)

Answer 2

textarea 只是一个后备元素，不会随着输入的内容实时更新。您必须获取 CKEditor 实例的内容。这绝对是可能的。

查看此问题中的方法。在每次内容更改时访问 CKEditor 的内容。

不过，我认为你有一个更大的问题。这段代码有多少个字符？：

<b><span class="redText">H</span>ello <span>World!</span></b>

（答案 - 我认为 - 是十二）

或这个：

<b>  <p style="font-size: 30px; font-weight: bold"></p>  </b>

（答案 - 我认为 - 是两个空格）

或这个：

<hr>

（答案 - 我认为 - 是一个，但这实际上取决于解释）

这些都是在 CKEditor 中写入和删除文本时可能出现的字符串。

假设您想计算所有没有 HTML 标签的字符，忽略图像或水平线等附加元素，JavaScript有一个strip_tags()函数可用于剥离数据。

Answer 3

如果您可以像其他帖子所描述的那样获得CKEditor的内容,我知道如何获取输入的字符数.一旦你有了内容,请说

<b><span class="redText">H</span>ello <span>World!</span></b>

你可以将它设置为隐藏div的innerHTML,然后获取该div的innerText中的字符数.

var elem = document.getElementById('hiddenTestDiv');
elem.innerHTML = '<b><span class="redText">H</span>ello <span>World!</span></b>';
var innerText = elem.innerText;  // equals 'Hello World!'
var contentLength = elem.innerText.length; // equals 12

我会说这不是一个完美的解决方案(例如,只是<hr>在你的内容中将返回0表示innerText的长度),但它可能足够接近你的工作.计算html内容的长度是一种奇怪的情况,因为Pekka说像<hr>标签长度这样的东西可以解释.