我刚刚用出色的Redactor替换了 CKEditor(它带有大量与 AJAX 更新 DOM 相关的神秘问题)。我们之前使用 CKEditor 插件来为我们提供富文本编辑器的字符数。如何使用 Redactor 实现相同的目标?没有内置任何东西,也没有“插件”架构可供使用。
3 回答
这点我有过头绪。我相信会有更好的方法来实现相同的目标,但我会发布它以防它对其他人在相同的修复中是一个好的开始。
以下代码将富文本编辑器添加到具有类“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");
}
}
}
});
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");
}
}
}
好的,首先你需要确保你的编辑器文件夹中有这两个插件:
您需要使用限制器来限制长度,并使用计数器来显示状态栏。示例代码将如下所示:
<!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>