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

Question

我刚刚用优秀的Redactor取代了CKEditor(它带来了与DOM的AJAX更新相关的大量神秘问题).我们以前使用CKEditor插件为富文本编辑器提供字符数.如何使用Redactor实现相同的目标？没有内置任何东西,也没有"插件"架构可供使用.

Answer 1

我对此有所了解.我相信会有更好的方法来实现同样的目标,但我会发布它,以防它在同一个修复程序中的其他人是一个良好的开端.

以下代码将富文本编辑器添加到具有"richText"类的任何textarea字段,并且仅在te​​xtarea上使用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 - 但需要按钮来粘贴html),我们希望对粘贴在内容中的内容做出反应,因为以及输入.

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