Existe um plugIn para o próprio CKEditor com o propósito de limitar o número de caracteres inseridos:
CKEditor Maxlength Plugin (Inglês)
Ficam os passos para implementar o mesmo:
Editar o ficheiro config.js
e adicionar o seguinte:
config.extraPlugins = 'maxlength';
O resultado será algo deste género:
CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here.
// For the complete reference:
// http://docs.ckeditor.com/#!/api/CKEDITOR.config
config.extraPlugins = 'maxlength';
};
Na textarea
adicionar um dos dois seguintes atributos maxlength="xxx"
ou data-maxlen="xxx"
ficando algo deste género:
<textarea rows="5" name="ola" id="ola" cols="120" data-maxlen="255"></textarea>
Podes fazer o download do plugIn a partir deste link.
Código do PlugIn
Nos comentários do PlugIn, um utilizador queixava-se de um erro referente ao uso do hasAttr()
.
Por via das dúvidas segue o plugIn sem o uso do referido método:
/*
* 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;
Guardar num ficheiro com o nome plugin.js
que deverá ficar numa pasta com o nome maxlength
.