Question

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

Answer 1

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

以下代码将富文本编辑器添加到任何具有“richText”类的textarea字段，并且仅在textarea上使用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），我们希望对粘贴在via中的内容做出反应以及输入。

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

Answer 2

obj。$ el是原始textarea的jQuery元素。

obj。$ el.getCode（）。length会在考虑要添加的HTML元素时给出意想不到的结果。

我认为更准确的方法是将“.redactor_editor”定位为获取文本长度

新的keupCallback方法：

keyupCallback: function (obj) {
    var max = obj.$el.getEditor().next().attr("maxlength");
    if (typeof max !== "undefined") {
        var $box = obj.$el.closest(".redactor_box")
            ,current = $box.find('.redactor_editor').text().length
            ,$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></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");
        }
    }
}

Answer 3

好吧，首先您需要确保在redactor文件夹中具有这两个插件：

您需要使用限制器来限制长度，并使用计数器来显示状态栏。示例代码将如下所示：

<!DOCTYPE html>
<html>
    <head>
        <title>Redactor</title>
        <meta charset="utf-8">

        <!-- redactor css -->
        <link rel="stylesheet" href="/your-folder/redactor.css" />
    </head>
    <body>
        <!-- element -->
        <textarea id="content">...</textarea>

        <!-- redactor js -->
        <script src="/your-folder/redactor.js"></script>

        <!-- plugin js -->
        <script src="/your-folder/plugins/limiter.js"></script>
        <script src="/your-folder/plugins/counter.js"></script>

        <!-- call -->
        <script>
        $R('#content', {
            plugins: ['limiter', 'counter'],
            limiter: 100
        });
        </script>
    </body>
</html>

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

3 个答案: