たったの1行でwysiwygエディタを実装できる「bootstrap-wysihtml5」

「bootstrap-wysihtml5」はツールバーがシンプルでとてもかっこいいwysiwygエディタをたった1行のJavaScriptで実装できるJavaScriptライブラリです。

bootstrap-wysihtml5

screenshot342

機能は必要最低限ですがツールバーがかっこいいです。リンクや画像のURLはモーダルウィンドウから指定できます。

screenshot343

 

それでは「bootstrap-wysihtml5」の実装方法をご紹介します。まずはjQuery、Bootstrap含む外部ファイルを読み込みます。

<link rel="stylesheet" type="text/css" href="lib/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="src/bootstrap-wysihtml5.css">
<script src="lib/js/wysihtml5-0.3.0.js"></script>
<script src="lib/js/jquery-1.7.2.min.js"></script>
<script src="lib/js/bootstrap.min.js"></script>
<script src="src/bootstrap-wysihtml5.js"></script>

 

HTMLはこのようにマークアップします。未入力時にうっすらと表示させておきたい文章は”placeholder”で指定します。

<textarea class="textarea" placeholder="Enter text ..." style="width: 550px; height: 200px"></textarea>

 

JavaScriptは以下の1行だけです!これでツールバーまで作れてしまいます。

$('.textarea').wysihtml5();

 

するとこのように作成することが出来ました。

screenshot344

 

これは簡単すぎますね。wysiwygエディタ使うことがあったら間違いなく「bootstrap-wysihtml5」を選ぶでしょう。ぜひ参考にどうぞ。

 

Home > JavaScript > たったの1行でwysiwygエディタを実装できる「bootstrap-wysihtml5」

Return to page top