javascript - 如何显示 Redactor 富文本/html 编辑器的字符数/字数？

Question

我刚刚用出色的 Redactor 替换了 CKEditor(它伴随着大量与 AJAX 更新 DOM 相关的神秘问题) .我们以前使用 CKEditor 插件为我们提供富文本编辑器的字符数。我怎样才能用 Redactor 达到同样的目的？没有任何内置内容，也没有可供使用的“插件”架构。

Answer 1

我试过这个。我确信会有更好的方法来实现同样的事情，但我会发布它，以防它对处于相同修复中的其他人来说是一个好的开始。

以下代码将富文本编辑器添加到任何具有“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)，我们希望对通过它粘贴和输入的内容使用react。

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