标题说明了一切。如何让TinyMCE显示字符数而不是字数?
答案 0 :(得分:8)
编写自己的插件。
以下解决方案基于this article。 charactercount
插件计算用户看到的实际字符数,忽略所有HTML和隐藏字符。
字符数插件:
tinymce.PluginManager.add('charactercount', function (editor) {
var self = this;
function update() {
editor.theme.panel.find('#charactercount').text(['Characters: {0}', self.getCount()]);
}
editor.on('init', function () {
var statusbar = editor.theme.panel && editor.theme.panel.find('#statusbar')[0];
if (statusbar) {
window.setTimeout(function () {
statusbar.insert({
type: 'label',
name: 'charactercount',
text: ['Characters: {0}', self.getCount()],
classes: 'charactercount',
disabled: editor.settings.readonly
}, 0);
editor.on('setcontent beforeaddundo', update);
editor.on('keyup', function (e) {
update();
});
}, 0);
}
});
self.getCount = function () {
var tx = editor.getContent({ format: 'raw' });
var decoded = decodeHtml(tx);
var decodedStripped = decoded.replace(/(<([^>]+)>)/ig, "").trim();
var tc = decodedStripped.length;
return tc;
};
function decodeHtml(html) {
var txt = document.createElement("textarea");
txt.innerHTML = html;
return txt.value;
}
});
CSS调整:
/* Optional: Adjust the positioning of the character count text. */
label.mce-charactercount {
margin: 2px 0 2px 2px;
padding: 8px;
}
/* Optional: Remove the html path code from the status bar. */
.mce-path {
display: none !important;
}
TinyMCE初始化(使用jQuery)
$('textarea.tinymce').tinymce({
plugins: "charactercount",
statusbar: true,
init_instance_callback: function (editor) {
$('.mce-tinymce').show('fast');
$(editor.getContainer()).find(".mce-path").css("display", "none");
}
// ...
});
PS。使用JS minifier。
答案 1 :(得分:2)
init_instance_callback: function (editor) {
editor.on('change', function (e) {
var length = editor.contentDocument.body.innerText.length;
});
}
在init上添加此项。长度是你的角色长度。现在你需要隐藏字数并用字符计数器附加一个新的字符串。
答案 2 :(得分:1)
wordcount插件现在可以计数并显示字符了:
单击状态栏中的字数统计可在字数统计之间切换 和字符。
默认模式是“单词”,但是很容易模拟在状态栏中单击以进行切换。
按照以下方式更改编辑器配置:
tinymce.init({
plugins: "wordcount",
// ...
init_instance_callback: function (editor) {
$(editor.getContainer()).find('button.tox-statusbar__wordcount').click(); // if you use jQuery
}
});
仅此而已。您现在有了字符数。
答案 3 :(得分:0)
通过创建银色主题的自定义版本,我能够将wordcount插件设置为默认显示字符。看起来在TinyMCE 5.1.6中,呈现插件的方式在主题文件中设置。 TinyMCE配置:
{
selector: '.tinymce',
theme: 'silver-custom',
...
}
主题文件是themes / silver / theme.js的副本,需要在TinyMCE之后加载。
更改:
...
function Theme () {
global$1.add('silver-custom', function (editor) {
...
和
...
var renderWordCount = function (editor, providersBackstage) {
...
store: {
mode: 'memory',
initialValue: {
mode: 'characters',
...
}
...