この記事では、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をもっとサポートすることを願っています。