Bootstrap-wysiwyg:小さなテキストエディター







bootstrap-wysiwygテキストエディターは、縮小および圧縮された形式でわずか1.5 KB、6 KBをわずかに超えるソースコード、execCommandに基づく基本的な編集機能、画像を挿入するためのドラッグアンドドロップ、標準のホットキーのサポートなどです。 このエディターは、最新のブラウザー(Chrome 26、Firefox 19、Safari 6)およびモバイルプラットフォーム(IOS 6 iPad / iPhone、Android 4.1.1 Chrome)で動作します。 依存関係-jQueryjQuery HotKeys 、およびBootstrap。



テキストは、iframeとtextareaを作成せずに、 contenteditable



属性を持つdiv



で編集されます。 標準のツールバーとスタイルはありません-ブートストラップツールを使用して作成できます。 編集コマンドはdata-edit



属性を使用してボタンに添付されます。 テキストのスタイルを制御するツールバーフラグメントの例を次に示します。



 <div class="btn-group"> <a class="btn" data-edit="bold" title="Bold (Ctrl/Cmd+B)"><i class="icon-bold"></i></a> <a class="btn" data-edit="italic" title="Italic (Ctrl/Cmd+I)"><i class="icon-italic"></i></a> <a class="btn" data-edit="strikethrough" title="Strikethrough"><i class="icon-strikethrough"></i></a> <a class="btn" data-edit="underline" title="Underline (Ctrl/Cmd+U)"><i class="icon-underline"></i></a> </div>
      
      





キーボードショートカットは、hotKeysオブジェクトを使用して指定できます。



 $('#editor').wysiwyg({ hotKeys: { 'ctrl+b meta+b': 'bold', 'ctrl+i meta+i': 'italic', 'ctrl+u meta+u': 'underline', 'ctrl+z meta+z': 'undo', 'ctrl+y meta+y meta+shift+z': 'redo' } });
      
      





実際、それでほぼすべてです。 エディターでの作業の微妙な違いは、 デモページの手順とプロジェクトリポジトリで説明されています



このエディターは、関連マップを作成するためのWebアプリケーションであるMindMupプロジェクトの作業中に生まれました。 開発者はシンプルなコンテンツエディタを必要としていましたが、既存のオプションはそれらに適合しませんでした。古いブラウザと組み込みツールバーをサポートするために多くのコードに沿ってドラッグしました。ブートストラップ。 HTML5、jQuery、およびBootstrapの機能を使用して、必要最小限の機能を200行未満のコードに収めることができました。



Githubでコードを公開した後、そのような最新で軽量のエディターは非常に不足していることがわかりました-2週間で約2,000人のサブスクライバーが獲得しました。



エディターはMITの下でライセンスされています。






All Articles