この記事では、Bootstrap-WysiWygテキストエディターを使用して、エディターの利点に完全なプレイを行う方法を教えています。私はあなたが何かを得ることができることを願っています。
主な機能：
超小さい5kb
自動ホットキーサポート（MacとWindows）
挿入写真をドラッグアンドドロップし、写真のアップロードをサポートします（携帯電話の写真をサポートします）
サウンド入力（Chromeサポート）をサポートする
カスタムツールバーがすべてのブートストラップコンテンツ、フォントを使用できるようにします
必須スタイルは使用されていません
………………………………………………………………………
実際、それ以上のものであり、誰もが自分でそれを探求する必要があります、来てください！
実際には非常に簡単です。次のように、ブートストラップ関連のCSS、JS、JQuery、およびBootstrap-WysiWygのJSを注ぎます。
<link href = "bootstrap-combined.no-icons.min.css" rel = "styleSheet"> <link href = "bootstrap-responsive.min.css" rel = "styleSheet"> <link href = "http://netdna.bootstrappcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel = "styleSheet"> <link rel = "styleSheet" href = "index.css" type = "text/css" type = "text/javascript"> </script> <script src = "bootstrap.min.js"> </script> <script src = "bootstrap-wysig.js" type = "text/javascript"> </script> <script src = "external/jquery.hotkeys.js"> "> </javascript>
関連するメニュー項目のプロパティとメソッドを定義します。
function inittoolbarbootstrapbindings（）{var fonts = ['serif'、 'sans'、 'arial'、 'arial black'、 'courier'、 'courier new'、 'comic sans ms'、 'helvetica'、 'infact'、 'lucida grande'、 'lucida sans'、 'tahoma'、 'tahoma'、 'ferdan fonttarget = $（ '[title = font]'）。兄弟（ '。ドロップダウンメニュー'）; $ .each（fonts、function（idx、fontname）{fonttarget.append（$（ '<li> <a data-edit = "fontname' + fontname + '" style = "font-family：/' ' + fontname +'/'">' + fontname + '</a> </li>'）;}; $（ 'a [title]'）。tooltip（{container： 'body'}）; $（'。Dropdown-Menu input '） $（ '[data-role = magic-overlay]'） 'Absolute'）。offset（target.offset（））。width（target.outerwidth（））。 if（ "onwebkitsepeechchange" in Document.createElement（ "input"））{var editoroffset = $（ '＃editor'）。offset（）; $（ '＃voicebtn'）。css（ 'position'、 'absolute'）。offset（{top：editoroffset.top、left：editoroffset.left+$（ '＃editor'）。innerwidth（） - 35}）; } else {$（ '＃voicebtn'）。hide（）; }}; function showerroralert（理由、詳細）{var msg = ''; if（Reason === 'Supported-File-Type'）{MSG = "Unsupported Format" +detail; } else {console.log（ "エラーアップロードファイル"、理由、詳細）; } $（ '<div> <button type = "button" data-dismiss = "alert">×</button>'+'<strong>ファイルアップロードエラー</strong>'+msg+'</div>'）。 }; inittoolbarbootstrapbindings（）; $（ '＃editor'）。wysiwyg（{fileuploaderror：showerroralert}）;最後に、HTMLコード：
<div data-role = "editor-toolbar" data-target = "＃editor"> <div> <a data-toggle = "ドロップダウン"> <i> </i> </b> </a> <ul> </ul> </div> <div> <div> <a data-toggle = "dropdown"> <i> data-edit = "fontsize 5"> <font size = "5">巨大</font> </a> </li> <li> <a data-edit = "fontsize 3"> <font size = "3"> normal> </a> </li> <li> <a data-edit = "fontisize 3"> font </font </font </font < <li> <a data-edit = "fontsize 1"> <font size = "1"> small </font> </a> </li> </ul> </div> <div> <a data-edit = "bold"> </i> </a> < data-edit = "strikethrough"> <i> </i> </a> <a data-edit = "underline"> <i> </i> </a> </div> <div> <a data-orderedlist "> <i> </i> </a> <a data-edit =" data-edit = "outtent"> <i> </i> </a> <a data-edit = "outsent"> <i> </i> </a> <a data-edit = "outsent"> <i> </i> </a> <a data-edit = "indent"> <i> </i> data-edit = "justifyleft"> <i> </i> </a> <a data-edit = "justifycenter"> <i> </i> </a> <a data-edit = "justifyight"> <i> </a> <a data-edit = "justifyfull"> <i> </i> </a> </ </ < data-toggle = "Dropdown"> <i> </i> </a> <div> <入力Placeholder = "url" type = "text" data-edit = "createLink"/> <ボタンタイプ= "ボタン">追加</button "> <a data-edit =" link "> <i> </i> id = "picturebtn"> <i> </i> </a> <入力タイプ= "file" data-role = "jagy-overlay" data-target = "＃picturebtn" data-edit = "insertimage"/> </div> <div> <a data-edit = "undo"> <i> </i> <入力型= "text" data-edit = "inserttext" id = "voicebtn" x-webkit-speech = ""> </div> <div id = "editor">コンテンツの入力…</div>
まだ詳細に勉強したい場合は、ここをクリックして素晴らしいトピックを学び、添付してください：Bootstrap Learningチュートリアル
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。