Limiting text in CKEDITOR

Question

I’m trying to make a character limiter in Ckeditor, but I couldn’t find any way, <textarea> does not work when using CKEDITOR.

I tried using the wordcounter plugin which now looks like only counts, does not limit.

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

Does anyone know any script? that limits?

Answer 1

There is a plugin for the Ckeditor itself for the purpose of limiting the number of characters entered:

Ckeditor Maxlength Plugin ^(English)

Here are the steps to implement the same:

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

2. In the textarea add one of the following two attributes maxlength="xxx" or data-maxlen="xxx" getting something like this:

   <textarea rows="5" name="ola" id="ola" cols="120" data-maxlen="255"></textarea>
   

You can download the plugin from of this link.

---

Plugin Code

In the Plugin comments, a user complained of an error regarding the use of hasAttr().
By the way of the doubts follows the plugin without the use of said 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;

^{Store in a file with the name plugin.js which should be in a folder with the name maxlength.}

Answer 2

The plugin wordcount of ckeditor has a parameter that limits the number of characters.

Solve the problem as follows:

showCharCount: true,
maxCharCount: 10 

Replace the value 10 with the number of characters you need.

Follow the link to the plugin documentation: Wordcount documentation