MaxLength /在中编辑器中输入的字符

时间:2017-02-10 18:47:05

标签: javascript ruby-on-rails-3 validation medium-editor

我正在使用媒体编辑器。

初始化medium-editor类的代码为

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

我正在使用以下方法为我的自定义字段绑定媒体编辑器。

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

我的问题是,我无法限制我的媒体编辑器字段的maxLength。我没有找到任何传递给中编辑器类来限制最大字符的选项。

有没有办法限制媒体编辑器中的最大字符?

1 个答案:

答案 0 :(得分:0)

目前没有办法限制媒体编辑器字段的长度。 github repo中有一个open issue,讨论如何实现这一目标。

浏览器不在可信字段上提供maxLength属性。还有什么问题是这些字段包含标记,所以如果你要引入maxLength,你需要找到一种方法来忽略所有文本的长度,而是跟踪/限制"可打印字符的数量&# 34 ;.例如:

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

此文本的全长为29个字符(包括标签),但您可能希望将长度计算为仅15个字符(&#34;粗体和斜体&#34;)。

这是一个stackoverflow帖子,建议限制文本长度的方法,这是媒体编辑器用于WYSIWYG文本的内容:

Limiting Number of Characters in a ContentEditable div

乍一看,该文章中的解决方案本身并不充分,因为它们要么依赖于jQuery(中型编辑器只是vanilla JS),要么依赖于.innerText元素属性({{{ 3}})。

任何可以在IE&gt; = 9中使用并且不需要jQuery的解决方案可以立即在介质编辑器中引入作为解决问题的功能is not supported in IE < 11 or Firefox < 50

实现这一点的另一个困难部分是如何实际执行长度限制。另一篇stackoverflow文章中提到的解决方案正在监听keyupkeydown事件,这些事件允许您检测用户何时键入并调用event.preventDefault()以防止输入文本。这并不能解释用户将内容粘贴到编辑器中或执行document.execCommand()的时间(这是浏览器处理内置文本格式的方式)。您可以收听paste事件,但是如果不允许粘贴发生,您将无法在浏览器中一致地检测到粘贴的内容,然后检查html。

因此,您可能不得不限制对编辑器中的更改作出反应,然后删除字符。这有闪烁文本的丑陋后果,但它是在用户粘贴或document.execCommand()之类的事情发生时始终限制长度的唯一方法。

input是检测除IE + Edge之外的所有浏览器的编辑器的任何更改(包括粘贴和document.execCommand())的好方法,它们从未支持input事件满足的领域。但是,MediumEditor公开了一个editableInput事件,它将在所有浏览器中一致地模拟事件(我恰好编写了标准化,让我告诉你,很难在IE + Edge中伪造输入事件! )。