rails使いがtwitter bootstrap用のwysiwygを速攻で導入

久々にwysiwygを導入することになって、色々探していたらgemで入れることが出来る、wysiwyg を発見しました。

bootstrap-wysihtml5

そこまで高機能では無いですが、必要最低限の機能が揃っています。
また、gemで導入することが可能ですので、数分で対応が完了します。
以下に全て当てはまる人が導入するものだと思います。

1. railsを使っている人
2. twitter bootstrapを使っている人
3. 導入がめんどくさい人
4. そこまで高機能を求めてない人

導入

Gemfileに追加

以下の内容を追加します。

gem 'bootstrap-wysihtml5-rails'

常に最新が欲しい場合は

gem 'bootstrap-wysihtml5-rails', :require => 'bootstrap-wysihtml5-rails',
                              :git => 'git://github.com/Nerian/bootstrap-wysihtml5-rails.git'

としましょう。

追加が完了したら、「bundle install」を行います。

js と cssを編集

bundle installが完了したら、必ずrailsを再起動して下さい。そうしないとjsとcssが上手く読み込まれません。

app/assets/stylesheets/application.cssを編集します。

*= require bootstrap-wysihtml5

app/assets/javascripts/application.jsを編集します。

//= require bootstrap-wysihtml5

wysihtml5を呼び出します。

  $(document).ready(function() {
    return $("#comment").wysihtml5();
  });

この時点である程度動作します。

日本語化

最後に日本語化です。

app/assets/javascripts/application.jsを編集します。

//= require bootstrap-wysihtml5
//= require bootstrap-wysihtml5/locales/ja-JP

wysihtml5を呼び出している箇所にオプションを渡します。

  $(document).ready(function() {
    return $("#comment").wysihtml5({
      locale: "ja-JP"
    });
  });

コレで完了です。

まとめ

導入まで約5分ほどで完了します。
気をつけることはrails再起動を必ずしましょう。

以上！