PHPSPOTで紹介されていたHTML5ベースの音声入力可能なWYSIWYGエディタ「wysihtml5」を試してみた。
Githubのリファレンスを読みながら下のように実装をした。
scriptを読み込む
<script src="./jquery.min.js"></script> <script src="./advanced.js"></script> <script src="./wysihtml5-0.3.0.min.js"></script>「wysihtml5-0.3.0.min.js」は、「wysihtml5-master」→「dist」の中にある。
「advanced.js」は、「parser_rules」の中にある。
次にコーディング
<div id="wysihtml5-toolbar" style="display: none;"> <a data-wysihtml5-command="bold">bold</a> <a data-wysihtml5-command="italic">italic</a> <a data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="h1">h1</a> <a data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="h2">h2</a> </div> <textarea id="wysihtml5-textarea" placeholder="テキストを入力してね!!" autofocus></textarea>最後にscriptを呼び出す。
<script> jQuery(function($){ var editor = new wysihtml5.Editor("wysihtml5-textarea",{ toolbar: "wysihtml5-toolbar", // id of toolbar element parserRules: wysihtml5ParserRules // defined in parser rules set }); }); </script>これ、別途CSSで独自カスタマイズできるので、いいですね。
0 コメント:
コメントを投稿