maxlength在ckeditor angularjs指令的文本区域中不起作用

maxlength not working in textarea for ckeditor angularjs directive

本文关键字：文本 区域 不起作用 指令 ckeditor angularjs maxlength      更新时间：2023-09-26

我使用 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标签，您可能希望保留它们，

我遇到了同样的问题。我制作了这个函数，它与CKEditor一起工作，基本上模仿maxlength函数。

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;
        }
    });    
};

此函数将检查以确保输入的字符不超过允许的字符。

如果这样做，它将返回 false，这根本不允许更多输入到字段中。

如果用户

按退格键或删除，则它将返回 true，如果用户达到内容限制，仍允许用户更改其内容。

相关文章：