maxlength не работает в текстовой области для директивы ckeditor angularjs

Я создал приложение в angularjs с плагином ckeditor, я создал директиву для 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: ''}];
}

javascript angularjs ckeditor maxlength angularjs-directive
person Alex Man    schedule 31.12.2014    source источник
comment
используйте ng-maxlength вместо maxlength..   -  person Ved    schedule 31.12.2014
comment
@Ved не работает JSFiddle   -  person Alex Man    schedule 31.12.2014
comment
maxlength отлично работает для textarea, но когда вы добавляете директиву, она не работает.   -  person Ved    schedule 31.12.2014
comment
@ Вед да ... так есть ли какое-нибудь решение для этого?   -  person Alex Man    schedule 31.12.2014
comment
Я попробую.. Но на самом деле я не знаю, как вы используете директиву, поэтому не знаю, какое решение будет оптимальным..   -  person Ved    schedule 31.12.2014
comment
Я думаю, вы должны сделать это, используя javascript. сделать функцию для проверки длины значения внутри textarea. вызовите эту функцию внутри ng-change=; в текстовой области   -  person Ved    schedule 31.12.2014
comment
@Ved ng-change работает .... но как предотвратить прекращение ввода после 50   -  person Alex Man    schedule 31.12.2014

Ответы (2)


arrow_upward
6
arrow_downward

Вам нужно добавить 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, вы можете их сохранить,

person Lajos Arpad    schedule 31.12.2014
comment
можешь дать мне jsfiddle - person Alex Man; 31.12.2014
comment
Конечно: jsfiddle.net/Lpqc4xhy. Однако, как я указал, мой пример не обрабатывает html внутри CKEDITOR. Вам также нужно разобрать его, так как мой код проверяет только длину и усекает ее, если она слишком длинная. - person Lajos Arpad; 31.12.2014
comment
на самом деле я ищу, как ограничить html внутри CKEDITOR - person Alex Man; 31.12.2014
comment
Вы проверили мой код? Он делает именно это. Однако вам нужно обрабатывать ‹p› и другие вещи. - person Lajos Arpad; 31.12.2014
comment
но я могу напечатать больше 50 символов, это не мешает - person Alex Man; 31.12.2014
comment
Эй, мы не можем написать эту функцию в директиве - person Alex Man; 31.12.2014
comment
Мои изменения почему-то не сохранились. Попробуйте это: jsfiddle.net/Lpqc4xhy/5. А если не получится, то добавьте, пожалуйста, код, который я описал в своем ответе. Вы должны по крайней мере сотрудничать, если мы помогаем вам. - person Lajos Arpad; 31.12.2014
comment
Хороший вопрос. Я никогда не использовал CKEDITOR, поэтому не знаю. Я только что решил вашу проблему, добавив идентификатор и реализовав функцию. Естественно, вы можете придать ему лучшую форму. Мой код является лишь доказательством концепции. Вам нужен синтаксический анализатор html для обработки тегов, так как ‹p› увеличивает общую длину, и вы можете изменить структуру своего кода, если хотите. - person Lajos Arpad; 31.12.2014

arrow_upward
4
arrow_downward

Я столкнулся с этой же проблемой. Я сделал эту функцию, которая работает с 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, что просто не позволит больше вводить данные в поле.

Если пользователь нажмет Backspace или удалить, он вернет true, что по-прежнему позволяет пользователю изменять свой контент, если он достигает предела контента.

person Josh    schedule 04.09.2015