2017-02-10 17 views
1

私は中エディタを使用しています。 medium-editorクラスを初期化するメディアエディタで入力するための最大長/文字

コードが

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

として与えられていると私は私のカスタムフィールドの中のエディタをバインドするために、以下の方法を使用しています。

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

私の問題は、私の中編集フィールドのmaxLengthを制限できないということです。私は最大の文字を制限するために中間エディタクラスに渡すオプションは見つかりませんでした。

メディアエディタで最大文字数を制限する方法はありますか?

答えて

0

現在、中エディタフィールドの長さを制限する方法はありません。これが達成される方法を議論するgithubのレポにopen issueがあります。

ブラウザは、内容編集可能なフィールドにmaxLengthプロパティを提供していません。この問題は、これらのフィールドにマークアップが含まれているため、maxLengthを導入する場合は、すべてのテキストの長さを無視し、「印刷可能な文字」の数を追跡/制限する方法を見つける必要があります。例:このテキストの

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

全長は(タグを含む)29個の文字になりますが、あなたはおそらく長さがちょうど15文字(「太字やイタリック」)として計算するとよいでしょう。一見

Limiting Number of Characters in a ContentEditable div

、ソリューションの:ここで

は、中エディタはWYSIWYGテキストに使用されているものである、のcontentEditableフィールド内のテキストの長さを制限する方法を示唆StackOverflowのポストでありますjQuery(中規模エディタはバニラJSのみ)または.innerText要素のプロパティ(is not supported in IE < 11 or Firefox < 50)に依存しているため、この記事は単独では十分ではありません。

IEに> = 9を仕事とjQueryを必要としない可能性が提案されている任意の溶液は直ちに問題に解決するための機能として、中のエディタで導入することができ#962

この実装について、他の難しい部分は、実際に強制する方法です長さ制限他のstackoverflowの記事に記載されている解決策は、ユーザーが入力中であることを検出してテキストが入力されないようにevent.preventDefault()を呼び出すことを可能にするkeyupと​​イベントを待機しています。これは、ユーザがコンテンツをエディタに貼り付けるときや、document.execCommand()が実行されたとき(ブラウザで組み込みのテキストフォーマットがどのように処理されるか)を考慮していません。 pasteイベントを聞くことはできますが、貼り付けを行わずにブラウザ全体で一貫してペーストの内容を検出してからhtmlを検査することはできません。

したがって、エディタの変更に反応して文字を削除することに制限されている可能性があります。これはテキストを点滅させるのは醜い結果になりますが、ユーザー貼り付けやdocument.execCommand()のようなものが発生した場合は、その長さを一貫して制限する唯一の方法です。

inputはのcontentEditableフィールド上inputイベントをサポートしたことがありませんIE +エッジを除いて、すべてのブラウザのために(貼り付けとdocument.execCommand()含む)エディタへの変更を検出するための素晴らしい方法です。しかし、MediumEditorは、すべてのブラウザでイベントを一貫してシミュレートするeditableInputイベントを公開しています(IE + Edgeで入力イベントを偽装するのは難しかったです!

関連する問題