I'm trying to make a character limiter in CKEditor, but I did not find any way, the script I used to limit <textarea> does not work when I'm using CKEDITOR.
I tried to use the wordcounter plugin which now seems to only count, does not limit .
extraPlugins: 'wordcount',
wordcount: {
showCharCount: true,
showWordCount: false,
charLimit: 7500
}
Does anyone know of a script? what limits?
There is a plugin for CKEditor itself for the purpose of limiting the number of characters entered:
CKEditor Maxlength Plugin ( English)
Here are the steps to implement the same:
Edit the file config.js and add the following:
config.extraPlugins = 'maxlength';
The result will be something like this:
CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here.
// For the complete reference:
// http://docs.ckeditor.com/#!/api/CKEDITOR.config
config.extraPlugins = 'maxlength';
};
In textarea add one of the following two attributes maxlength="xxx" or data-maxlen="xxx" to something like this:
<textarea rows="5" name="ola" id="ola" cols="120" data-maxlen="255"></textarea>
You can download the plugin from .
In PlugIn comments, a user complained about an error regarding the use of hasAttr() .
Just in case the plugin does not use this method:
/*
* CKEditor Maxlength Plugin
*
* Adds a character count to the path toolbar of a CKEditor instance
*
* @package maxlength
* @author Sage McEnery
* @version 1
* @copyright divgo 2012
* based on Word Count plugin from : http://www.n7studios.co.uk/2010/03/01/ckeditor-word-count-plugin/
*/
(function () {
CKEDITOR.plugins.maxlength = {
};
var plugin = CKEDITOR.plugins.maxlength;
function doCharacterCount(evt) {
var editor = evt.editor;
if ($('span#cke_maxlength_' + editor.name).length > 0) { // Check element exists
setTimeout(function () {
var charCount = editor.getData().length;
var wcTarget = $('span#cke_maxlength_' + editor.name);
if (editor.config.max_length > 0) {
wcTarget.html("Character " + charCount + "/" + editor.config.max_length);
} else {
wcTarget.html("Character: " + charCount);
};
if (charCount > editor.config.max_length) {
wcTarget.css('color', 'red');
editor.execCommand('undo');
} else if (charCount == editor.config.max_length) {
editor.fire('saveSnapshot');
wcTarget.css('color', 'red');
} else {
wcTarget.css('color', 'black');
};
}, 100);
}
}
/**
* Adds the plugin to CKEditor
*/
CKEDITOR.plugins.add('maxlength', {
init: function (editor) {
var maxLengthAttr = $("#" + editor.name).attr("maxlength"),
dataMaxLengthAttr = $("#" + editor.name).attr("data-maxlen");
if (typeof maxLengthAttr !== typeof undefined && maxLengthAttr !== false) {
editor.config.max_length = maxLengthAttr;
} else if (typeof dataMaxLengthAttr !== typeof undefined && dataMaxLengthAttr !== false) {
editor.config.max_length = dataMaxLengthAttr;
} else {
editor.config.max_length = 0;
};
setTimeout(function () {
if (editor.config.max_length > 0) {
$(".cke_bottom").append("<span id='cke_maxlength_" + editor.name + "'>Character: " + editor.getData().length + '/' + editor.config.max_length + "</span>");
} else {
$(".cke_bottom").append("<span id='cke_maxlength_" + editor.name + "'>Character: " + editor.getData().length + '/' + editor.config.max_length + "</span>");
}
}, 1000);
editor.on('key', doCharacterCount);
}
});
})();
// Plugin options
CKEDITOR.config.max_length = 0;
Save to a file named plugin.js that should be in a folder named maxlength .
The wordcount plugin of the ckeditor has a parameter that limits the number of characters.
Resolve the problem as follows:
showCharCount: true,
maxCharCount: 10
Replace 10 with the amount of characters you need.
Follow the link to the plugin's documentation: wordcount documentation