MaxLength/символы для ввода в редакторе средних размеров

Question

Я использую редактор средних размеров.

код для инициализации medium-editor класса задается как

var editor = new MediumEditor(el, { 
      placeholder: false, 
      toolbar: false 
     }) 

и я использую следующий метод, чтобы связать средний-редактор для моих пользовательских полей.

editor.subscribe('editableInput', function (event, currentEditable) { 
// my code goes here 
} 

Моя проблема в том, что я не могу ограничить maxLength для полей моего среднего редактора. Я не нашел никакой возможности перейти к классу medium-editor для ограничения максимальных символов.

Есть ли способ ограничить максимальные символы в средстве редактора?

Answer 1

В настоящее время нет способа ограничить длину поля среднего редактора. В реестре github есть open issue, где обсуждаются способы, которыми это может быть выполнено.

Браузеры не предлагают свойство maxLength в контентных полях. То, что также делает эту проблему, состоит в том, что эти поля содержат разметку, поэтому, если вы должны ввести maxLength, вам нужно будет найти способ игнорировать длину всего текста и вместо этого отслеживать/ограничивать количество «печатных символов». Пример:

<b>Bold and <i>italic</i></b> 

Полная длина этого текста будет 29 символов (включая теги), но вы, вероятно, хотите, чтобы длина может рассчитываться как только 15 символов («Жирный и курсив»).

Вот StackOverflow пост предлагать способы, чтобы ограничить длину текста в пределах contenteditable поля, что и средне-редактор используется для визуального текста:

Limiting Number of Characters in a ContentEditable div

На первый взгляд, решения в эта статья недостаточна сама по себе, потому что они либо зависят от jQuery (средний редактор - только ванильный JS), либо свойство элементов .innerText (которое is not supported in IE < 11 or Firefox < 50).

Любое решение, предложенное, которые могли бы работать в IE> = 9 и не требует JQuery может быть немедленно введена в среде редактора в качестве признака для решения Issue #962

Другая трудная часть о реализации этого, как на самом деле применять ограничение длины. Решения, вызываемые в другой статье stackoverflow, прослушивают события keyup и keydown, которые позволяют вам определять, когда пользователь вводит текст, и вызывать event.preventDefault(), чтобы предотвратить ввод текста. Это не учитывает моменты, когда пользователь вставляет содержимое в редактор или выполняется document.execCommand() (каким образом встроенное текстовое форматирование обрабатывается браузером). Вы можете прослушивать событие paste, но вы не сможете последовательно находить содержимое пасты в браузерах, не допуская вставки, а затем проверите html.

Итак, вам, вероятно, придется ограничиться реагированием на изменения в редакторе, а затем удалить символы. Это имеет уродливое следствие мигающего текста, но это будет единственный способ последовательно ограничивать длину, когда происходят такие вещи, как вставка пользователя или document.execCommand().

input является отличным способом, чтобы обнаружить какие-либо изменения в редакторе (в том числе и оклеек document.execCommand()) для всех браузеров, кроме IE + Края, которые никогда не поддерживали input события на contenteditable полей. Однако MediumEditor предоставляет событие editableInput, которое будет симулировать событие последовательно во всех браузерах (я просто так написал эту стандартизацию, и позвольте мне сказать вам, было сложно подделать входное событие в IE + Edge!).