Javascript 如何将字符计数器添加到我的羽毛笔项目?
因此,我必须为一个Asignment制作一个羽毛笔接口。必须有一个单词计数器,但我发现我也需要一个所有字符的计数器。 那么,将这个字符计数器添加到我的项目中的最佳方法是什么呢Javascript 如何将字符计数器添加到我的羽毛笔项目?,javascript,html,quill,Javascript,Html,Quill,因此,我必须为一个Asignment制作一个羽毛笔接口。必须有一个单词计数器,但我发现我也需要一个所有字符的计数器。 那么,将这个字符计数器添加到我的项目中的最佳方法是什么呢 class Counter { constructor(quill, options) { this.quill = quill; this.options = options; this.container = document.querySelecto
class Counter {
constructor(quill, options) {
this.quill = quill;
this.options = options;
this.container = document.querySelector(options.container);
quill.on('text-change', this.update.bind(this));
this.update(); // Account for initial contents
}
calculate() {
let text = this.quill.getText();
if (this.options.unit === 'word') {
text = text.trim();
// Splitting empty text returns a non-empty array
return text.length > 0 ? text.split(/\s+/).length : 0;
} else {
return text.length;
}
}
update() {
var length = this.calculate();
var label = this.options.unit;
if (length !== 1) {
label += 's';
}
this.container.innerText = length + ' ' + label;
}
}
Quill.register('modules/counter', Counter);
var quill = new Quill('#editor', {
modules: {
toolbar: toolbarOptions,
counter: {
container: '#counter',
unit: 'word'
}
},
theme: 'snow'
});
本指南提供了编写基于配置选项计算单词或字符数的模块的教程: 演示:
本指南提供了编写基于配置选项计算单词或字符的模块的教程: 演示: 在示例中, 默认情况下,字符计数从1开始。相反,它应该以0开头。这可以通过在计算函数中添加修剪方法来实现 更改:
calculate() {
let text = this.quill.getText();
致:
在示例中
默认情况下,字符计数从1开始。相反,它应该以0开头。这可以通过在计算函数中添加修剪方法来实现
更改:
calculate() {
let text = this.quill.getText();
致:
calculate() {
let text = this.quill.getText().trim();
quill.on('text-change', function () {
const limted = 10;
const totalChar = quillEditor.getLength() - 1;
if (quillEditor.getLength() > limted + 1)
quillEditor.deleteText(limted, totalChar);
else
chCounter.text(totalChar)
});