javascript - 如何显示Redactor RTF/HTML编辑器的字符数/字数？

我刚刚用出色的Redactor替换了CKEditor(它带有与AJAX更新有关的许多神秘问题)。我们以前使用CKEditor插件为富文本编辑器提供了字符计数。如何使用Redactor达成同一目标？没有内置的东西，也没有“插件”架构可以使用。

最佳答案

我为此感到刺痛。我敢肯定会有更好的方法来实现相同的目标，但是如果其他人在相同的修复中这是一个好的开始，我会予以张贴。

以下代码将富文本编辑器添加到任何具有“richText”类的文本区域，并且仅在文本区域上使用maxlength属性时，才进一步添加字符计数，例如

<textarea class="richText" maxlength="100"></textarea>

在这里，我已经在JavaScript中包含了CSS。实际上，我会将其放入单独的CSS文件中。

var initRichText = function () {
    $("textarea.richText").redactor({
        buttons: ['bold', 'italic', '|', 'unorderedlist', 'orderedlist'],
        keyupCallback: function (obj, event) {
            var max = obj.$el.getEditor().next().attr("maxlength");
            if (typeof max !== "undefined") {
                var current = obj.$el.getCode().length;
                var $box = obj.$el.closest(".redactor_box");
                var $indicator = $(".indicator", $box);
                if ($indicator.size() === 0) {
                    $box.append($("<div class='indicator' style='position:absolute;z-index:30;top:7px;right:7px;'><span class='current'>" + current + "</span> of <span class='max'>" + max + "</span> characters remaining</div>"));
                } else {
                    $(".current", $indicator).text(current);
                    $(".max", $indicator).text(max);
                }
                if (current >= max) {
                    $box.css("border", "1px solid #ff0000");
                    $indicator.css("color", "#ff0000");
                } else {
                    $box.css("border", "1px solid #DDDDDD");
                    $indicator.css("color", "#000000");
                }
            }
        }
    });
};
$(function(){
    initRichText();
});

编辑:正如MForMarlon所说，自从我们编写这段代码以来，redactor.js发生了变化。碰巧的是，我们在今天进行这项工作，已经一年多没有碰了!奇怪的。无论如何，这是可与Redactor v9.2.5一起使用的最新版本。请注意，我们现在使用initCallback在富文本编辑器首次加载时而不是在用户开始键入时应用字符计数器。我们还使用了changeCallback而不是keyupCallback，因为我们添加了“粘贴为纯文本”模式(请参见redactor.js pastePlainText - but need button to paste html instead)，并且我们希望对通过粘贴和键入内容进行响应。

$(".richText").redactor({
    shortcuts: false,
    buttons: ['bold', 'italic', '|', 'unorderedlist', 'orderedlist', '|', 'html', 'pasteAsPlainText'],
    plugins: ['pasteAsPlainText'],
    initCallback: function (event) {
        var max = this.$editor.next().attr("maxlength");
        if (typeof max !== "undefined" && max > 0) {
            var html = this.get();
            var current = html.length;
            var remaining = max - current;
            this.$box.append($("<div class='indicator' style='position:absolute;z-index:30;top:7px;right:7px;'><span class='current'>" + remaining + "</span> of <span class='max'>" + max + "</span> characters remaining</div>"));
        }
    },
    changeCallback: function (event) {
        var max = this.$editor.next().attr("maxlength");
        if (typeof max !== "undefined" && max > 0) {
            var html = this.get();
            var current = html.length;
            var remaining = max - current;
            var $indicator = $(".indicator", this.$box);
            $(".current", $indicator).text(remaining);
            $(".max", $indicator).text(max);
            if (current >= max) {
                this.$box.css("border", "1px solid #ff0000");
                $indicator.css("color", "#ff0000");
            } else {
                this.$box.css("border", "1px solid #DDDDDD");
                $indicator.css("color", "#000000");
            }
        }
    }
});