Last active
July 10, 2024 14:09
-
-
Save ClementParis016/ab06847c41160c22f278e4cabe4a0879 to your computer and use it in GitHub Desktop.
TinyMCE characters counter plugin
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
tinymce.init({ | |
plugins: 'charactercount', | |
elementpath: false | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Credit: https://amystechnotes.com/2015/05/06/tinymce-add-character-count/ | |
* This is a slightly modified version to work with more recent TinyMCE version, fix some code styling and don't trim | |
* trailing and leading whitespaces from count. | |
*/ | |
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 keyup', update); | |
}, 0); | |
} | |
}); | |
_self.getCount = function () { | |
var tx = editor.getContent({ format: 'raw' }); | |
var decoded = decodeHtml(tx); | |
var decodedStripped = decoded.replace(/(<([^>]+)>)/ig, ''); | |
var tc = decodedStripped.length; | |
return tc; | |
}; | |
function decodeHtml(html) { | |
var txt = document.createElement('textarea'); | |
txt.innerHTML = html; | |
return txt.value; | |
} | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.mce-label.mce-charactercount | |
margin: 2px 0 2px 2px | |
padding: 8px | |
font-size: 12px | |
.mce-path | |
display: none !important |
Is there a way to limit the maximum number of characters that can be entered, like the maxlength attribute on textarea ?
I guess Adding custom text in statusbar in TinyMCE 5.x does not work like it used to in 4.x.
I had tried this code but it is not working for me can any once check my code.
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 keyup', update);
}, 0);
}
});
_self.getCount = function () {
var tx = editor.getContent({ format: 'raw' });
var decoded = decodeHtml(tx);
var decodedStripped = decoded.replace(/(<([^>]+)>)/ig, '');
var tc = decodedStripped.length;
return tc;
};
function decodeHtml(html) {
var txt = document.createElement('textarea');
txt.innerHTML = html;
return txt.value;
}
});
tinymce.init({
selector:'.product_desc',
height : "280",
plugins: 'lists code charactercount',
elementpath: false,
branding: false,
toolbar: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | outdent indent | code | numlist bullist ',
init_instance_callback: function (ed) {
ed.on('keyup', function (e) {
var max = 300;
var count = ed.contentDocument.body.innerText.length;
//console.log(count);
document.getElementById("character_count").innerHTML = "Characters: " + count;
if (count > max) {
alert("Maximum " + max + " characters allowed.");
return false;
}
});
ed.on('keypress', function (e) {
var max = 300;
var count = ed.contentDocument.body.innerText.length;
console.log("Key Press");
count = count + 1;
console.log(count);
if (count > max) {
alert("Maximum " + max + " characters allowed.");
return false;
}
});
}
});
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Rename the folder
charactercount
Change the first line to
tinymce.PluginManager.add('charactercount', function (editor,url) {
Just below that add:
tinymce.DOM.loadCSS(url + '/css/charactercount.css');
Minify the file and name it
plugin.min.js
Create a subfolder called
css
Create a file within that folder called
charactercount.css
Place the following css:
.mce-label.mce-charactercount {
margin: 2px 0 2px 2px;
padding: 8px;
font-size: 14px;
}
Clear your cache and reload the page. Works great!