3

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

4

3 回答 3

7

这点我有过头绪。我相信会有更好的方法来实现相同的目标，但我会发布它以防它对其他人在相同的修复中是一个好的开始。

以下代码将富文本编辑器添加到具有类“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 - 但需要按钮来粘贴 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");
            }                
        }
    }
});
于 2012-09-14T10:52:04.900 回答
1

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");
        }
    }
}
于 2014-01-27T19:24:31.107 回答
0

好的，首先你需要确保你的编辑器文件夹中有这两个插件：

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

<!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>
于 2019-06-19T06:31:54.520 回答