6

Estou tentando fazer um limitador de caracteres no CKEditor, porém não encontrei nenhuma maneira,o script que usava para limitar <textarea> não funciona quando estou utilizando o CKEDITOR.

Tentei utilizar o plugin 'wordcounter' que agora parece que só conta, não limita.

extraPlugins: 'wordcount',
                wordcount: {
                    showCharCount: true,
                    showWordCount: false,
                    charLimit: 7500
                }

Alguém conhece algum script? que limita?

2 Respostas 2

8

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:

  1. 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';
    
    };
    
  2. 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.

3
  • no firefox não funciona esse plugin...erro de hasAttr e é um erro que inviabiliza o uso, já que ele deixa de rederizar o ckeditor
    – Dorath
    Commented 25/06/2014 às 17:34
  • @Dorathoto Trocaste o código do plugIn pelo que eu meti na resposta? Eu alterei o plugIn para evitar o uso do hasAttr()
    – Zuul
    Commented 25/06/2014 às 17:49
  • não, acabei puxando o código do site, vou testar com o seu... achei q era igual..foi mal
    – Dorath
    Commented 25/06/2014 às 18:22
1

O plugin wordcount do ckeditor tem um parâmetro que limita a quantidade de caracteres.

Resolva o problema da seguinte forma:

showCharCount: true,
maxCharCount: 10 

Substitua o valor 10 pela quantidade de caracteres que precisar.

Segue o link para a documentação do plugin: Documentação do wordcount

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .