Счетчик для TinyMCE не работает должным образом - PullRequest
Новая
       36

Счетчик для TinyMCE не работает должным образом

6 голосов
/ 10 мая 2019

Я знаю, что существует так много решений, но не могу найти правильное решение.Я написал код для настроенного счетчика в tinyMCE версии 3, который имеет атрибут maxlength, который не работает.Я хочу прекратить давать больше текста, когда счетчик достигает 0, я использовал setcontent("") и substring(0,maxcount), это кажется проблемой, потому что, когда я даю любые 2 символа между его усечением последних двух символов, чего не должно быть.Также я попытался использовать evt.preventDefault() Это предотвращает, но не может набрать IN снова для нажатия клавиш, и нажатие также исключает bacspace и delete, но это не работает правильно.вот мой код. 

    tinyMCE.init({
        mode: "textareas",
        theme: "advanced",
        editor_selector: "mceEditor",
        paste_auto_cleanup_on_paste: 'true',
        theme_advanced_disable: 'justifyleft,justifyright,justifyfull,justifycenter,indent,image,anchor,sub,sup,unlink,outdent,help,removeformat,link,fontselect,hr,styleselect,formatselect,charmap,separator,code,visualaid,strikethrough,fullscreen',
        theme_advanced_buttons1: 'bold,italic,underline,numlist,bullist,undo,redo,cleanup,spellchecker',
        theme_advanced_buttons2: "",
        theme_advanced_buttons3: "",
        plugins: 'spellchecker,fullscreen,paste',
        spellchecker_languages: '+English=en-us',
        spellchecker_rpc_url: '<%out.print(request.getContextPath());%>/jazzy-spellchecker',
        theme_advanced_statusbar_location: "bottom",
        theme_advanced_path : false,
        statusbar: true,
        setup: function(editor)
        {
             editor.onKeyUp.add(function(evt)
            {
                var maxLengthRichTextArea = 5;
                 var inputRichTextArea = $(editor.getBody()).text();
                 var inputRichTextAreaLength = inputRichTextArea.length;
                 var value = maxLengthRichTextArea-inputRichTextAreaLength;
                 if(value >= 0)
                 {  
                 $(tinyMCE.activeEditor.getContainer()).find("#"+editor.id+"_path_row").html("Remaining chars: "+(value));
                }           
                if(inputRichTextAreaLength > maxLengthRichTextArea) {
                 editor.setContent("");
                tinyMCE.activeEditor.selection.setContent(inputRichTextArea.substring(0, maxLengthRichTextArea));
                }                  
            });
        }
    });

</script>

HTML 

<textarea id="450225" class="mceEditor"  maxlength="10" style="display: none;"></textarea>

Это хорошо работает

Ноздесь, когда я добавляю 6, его обрезка последней цифры 5

Как решить эту проблему, и максимальное количество на самом деле является большим числом, которое приходит из базы данных.

1 Ответ

7 голосов
/ 13 мая 2019

Вот рабочий пример того, чего вы пытаетесь достичь:

HTML: 

<textarea id="text"></textarea>

Javascript: 

tinymce.init({
  selector: "textarea#text",
  height: 500,
  menubar: false,
  setup: function(editor) {
    var maxlength = 5;
    var allowedKeys = [8, 37, 38, 39, 40];
    editor.on("keydown", function(e) {
      var count = $(editor.getBody()).text().length;
      if(allowedKeys.indexOf(e.which) != -1) {
         return;
      }
      if (count >= maxlength) {
        e.stopPropagation();
        return false;
      }
    });
  }
});

И codepen , я надеюсь, это поможет вам! В моем коде максимальная длина 5, но вы можете изменить ее с помощью переменной maxlength.

...