maxlength not working in textarea for ckeditor angularjs directive

Question

I have created an application in angularjs with ckeditor plugin, I have created a directive for ckeditor, The application is working fine but the issue is that i need to set a max character length to be 50, so i put maxlength="50", but its not working,

Can anyone please tell me some solution for this

JSFiddle

html

<div data-ng-app="app" data-ng-controller="myCtrl">

<h3>CKEditor 4.2:</h3>
    <div ng-repeat="editor in ckEditors">
    <textarea data-ng-model="editor.value" maxlength="50" data-ck-editor></textarea>
    <br />
    </div>
    <button ng-click="addEditor()">New Editor</button>
</div>

script

var app = angular.module('app', []);

app.directive('ckEditor', [function () {
    return {
        require: '?ngModel',
        link: function ($scope, elm, attr, ngModel) {

            var ck = CKEDITOR.replace(elm[0]);

            ck.on('pasteState', function () {
                $scope.$apply(function () {
                    ngModel.$setViewValue(ck.getData());
                });
            });

            ngModel.$render = function (value) {
                ck.setData(ngModel.$modelValue);
            };
        }
    };
}])

function myCtrl($scope){
    $scope.ckEditors = [{value: ''}];
}

Solution 1

You need to add an id to your textarea, like this:

<textarea data-ng-model="editor.value" maxlength="50" id="mytext" data-ck-editor></textarea>

You need to handle the key events for CKEDITOR:

window.onload = function() {
    CKEDITOR.instances.mytext.on( 'key', function() {
        var str = CKEDITOR.instances.mytext.getData();
        if (str.length > 50) {
            CKEDITOR.instances.mytext.setData(str.substring(0, 50));
        }
    } );
};

This works, however, note, that the content contains html tags as well, you might want to keep them,

Solution 2

I came across this same issue. I made this function which works with CKEditor to basically mimic the maxlength function.

window.onload = function() {            
    CKEDITOR.instances.mytext.on('key',function(event){
        var deleteKey = 46;
        var backspaceKey = 8;
        var keyCode = event.data.keyCode;
        if (keyCode === deleteKey || keyCode === backspaceKey)
            return true;
        else
        {
            var textLimit = 50;
            var str = CKEDITOR.instances.mytext.getData();
            if (str.length >= textLimit)
                return false;
        }
    });    
};

This function will check to make sure the input does not have more than the allowed characters.

If it does it will return false which simply does not allow any more inputs into the field.

If the user presses backspace or delete then it will return true which still allows the user to change their content if they reach the content limit.

Comments

[Alex Man]

can you give me a jsfiddle

[Lajos Arpad]

Sure: jsfiddle.net/Lpqc4xhy. However, as I pointed out, my example does not handle the html inside the CKEDITOR. You need to parse it as well, since my code only checks the length and truncates it if too long.

[Alex Man]

actually i am looking for how to limit the html inside CKEDITOR

[Lajos Arpad]

Did you check my code? It does just that. You need to handle <p> and other things though.

[Alex Man]

but i can type beyond 50 charcters, its not preventing that

[Alex Man]

hey cant we write that function within the directive

[Lajos Arpad]

For some reason my changes were not saved. Try this: jsfiddle.net/Lpqc4xhy/5. And if unsuccessful, then please add the code I have described in my answer. You should at least cooperate if we are helping you.

[Lajos Arpad]

Good question. I have never used CKEDITOR, so I do not know. I have just solved your problem by adding the id and implementing the function. You can give it a better form, naturally. My code is only a proof-of-concept. You need an html parser to handle the tags, as <p> adds to the total length and you can restructure your code if you want to.