javascript maxlength 不适用于 ckeditor angularjs 指令的 textarea
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27719498/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
maxlength not working in textarea for ckeditor angularjs directive
提问by Alex Man
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,
我用 ckeditor 插件在 angularjs 中创建了一个应用程序，我为 ckeditor 创建了一个指令，该应用程序工作正常，但问题是我需要将最大字符长度设置为 50，所以我放了maxlength="50"，但它不起作用，
Can anyone please tell me some solution for this
谁能告诉我一些解决方案
html
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: ''}];
}
回答by Lajos Arpad
You need to add an idto your textarea, like this:
您需要将添加id到您的textarea，就像这样：
<textarea data-ng-model="editor.value" maxlength="50" id="mytext" data-ck-editor></textarea>
You need to handle the key events for CKEDITOR:
您需要处理以下关键事件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,
这有效，但是请注意，内容也包含 html 标签，您可能希望保留它们，
回答by Josh
I came across this same issue. I made this function which works with CKEditor to basically mimic the maxlength function.
我遇到了同样的问题。我制作了这个与 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;
}
});
};
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.
如果是这样，它将返回 false ，这根本不允许更多输入到该字段中。
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.
如果用户按下退格键或删除键，那么它将返回 true，如果用户达到内容限制，它仍然允许用户更改他们的内容。
