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