最大长度不textarea的工作的CKEditor angularjs指令 [英] maxlength not working in textarea for ckeditor angularjs directive

问题描述

我已经创建与CKEditor的插件angularjs的应用程序，我已经创建了CKEditor的指令，该应用程序工作正常，但问题是，我需要设置一个最大字符长度为50，所以我把 MAXLENGTH =50，但它不工作，

谁能告诉我，这一些解决方案

的jsfiddle

HTML

 ＆LT; D​​IV数据-NG-应用=应用程序数据-NG-控制器=myCtrl＆GT;＆所述; H3＆GT; CKEditor的4.2：或其可/ H3＆GT;
    ＆LT; D​​IV NG重复=主编ckEditors＆GT;
    ＆LT; textarea的数据-NG-模式=editor.valueMAXLENGTH =50数据-CK-编辑＆GT;＆LT; / textarea的＆GT;
    ＆LT; BR /＆GT;
    ＆LT; / DIV＆GT;
    ＆LT;按钮NG点击=addEditor（）＆gt;全新编辑与LT; /按钮＆GT;
＆LT; / DIV＆GT;
 

脚本

  VAR应用= angular.module（'应用'，[]）;app.directive（'CKEDITOR'，[功能（）{
    返回{
        要求：'？ngModel'，
        链接：功能（$范围，榆树，ATTR，ngModel）{            变种CK = CKEDITOR.replace（榆[0]）;            ck.on（'pasteState'，函数（）{
                $范围。$应用（函数（）{
                    。ngModel $ setViewValue（ck.getData（））;
                }）;
            }）;            ngModel。$ =渲染功能（值）{
                ck.setData（ngModel $ modelValue）;
            };
        }
    };
}]）功能myCtrl（$范围）{
    $ scope.ckEditors = [{值：''}];
}
 

解决方案

我遇到了同样的问题。我做了这个功能，它与CKEditor的工作基本上模仿最大长度功能。

 的window.onload =函数（）{
    CKEDITOR.instances.mytext.on（'键'，函数（事件）{
        VAR DELETEKEY = 46;
        变种backspaceKey = 8;
        VAR键code = event.data.key code;
        如果（键code === DELETEKEY ||键code === backspaceKey）
            返回true;
        其他
        {
            VAR textLimit = 50;
            无功海峡= CKEDITOR.instances.mytext.getData（）;
            如果（str.length＆GT; = textLimit）
                返回false;
        }
    }）;
};
 

此功能检查，以确保输入没有超过允许的字符。

如果它就会返回false它只是不允许任何更多的投入到现场。

如果用户presses退格或删除然后它会返回true仍然允许用户如果他们达到极限的内容更改其内容。

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: ''}];
}

解决方案

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.

这篇关于最大长度不textarea的工作的CKEditor angularjs指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！