Friday, May 17, 2024
 Popular · Latest · Hot · Upcoming
30
rated 0 times [  36] [ 6]  / answers: 1 / hits: 15866  / 9 Years ago, sun, december 27, 2015, 12:00:00

The title says it all. How do I get TinyMCE to show character count instead of word count?



enter


More From » jquery

 Answers
45

Write your own plugin.



The following solution is based on this article. The charactercount plugin counts the actual characters that the user sees, all HTML and hidden characters are ignored. The number is updated on every key up event.



Character Count Plugin:



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);
// here we strip all HTML tags
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 Tweaks:



/* 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 Initialization (using 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. Use JS minifier.


[#63932] Wednesday, December 23, 2015, 9 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
brittanye

Total Points: 263
Total Questions: 94
Total Answers: 115

Location: Burkina Faso
Member since Thu, Dec 23, 2021
2 Years ago
;