javascript – 对于ckeditor angularjs指令,maxlength在textarea中不起作用

我已经使用ckeditor插件在 angularjs中创建了一个应用程序,我已经为ckeditor创建了一个指令,该应用程序工作正常,但问题是我需要将最大字符长度设置为50,所以我把maxlength =“50”,但它不起作用,

任何人都可以告诉我一些解决方案

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>

脚本

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: ''}];
}
您需要在textarea中添加一个id,如下所示:

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

您需要处理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));
        }
    } );
};

但是,请注意,内容中包含html标记,您可能希望保留它们,

相关文章
相关标签/搜索