我已经使用 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>
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: ''}];
}
您需要添加一个id
给你的textarea
, 像这样:
<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 标签,您可能希望保留它们,
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)