【CMS】【wisywig】ruby on railsでライティング記事投稿機能を作ってみた
ライティング記事投稿機能を作ってみた！
ライティング記事を投稿する機能がCMSで必要になったので作ってみました！
-
なにを使うか
色々と調べてみると、ckeditorなる高機能なテキストエディタがgemで提供されていることがわかりました。
しかもめちゃくちゃ簡単にできてカスタマイズも簡単そうだったので、
ckeditorを使って作っていきます。
-
前提
既にruby on railsの環境が整っていることを前提としてます。
環境はとある事情からstagingでやっています。
-
ckeditorを導入する
プロジェクトフォルダ直下のgemfile(例：my_app/gemfile)を開いて
下の内容を追記します。
ckditor以外のrmagickとmini_magickについては、
ライティング記事の中に画像を埋め込むために必要なので、一緒に記述します。
gemファイルに記入したら、itermからbundle installでインストールを実行します
これでckeditorの導入は完了です！
-
ckeditorの使ってみる
viewで下のようにform_forを利用して使います
こうすると下のようにckeditorが表示されます
これでckeditorの表示が完了です！
あれ？ここまで同じ手順でやったのに
表示されているckeditorの色とかボタン配置とがが違う！
となっていると思います(´・ω・｀)
ここからckeditorを自分色に染めて行く作業です！(・∀・)
-
ckeditorをカスタマイズする
公式のgithubを確認するとどうやら、ckeditorをカスタマイズするには
config.jsをオーバーライド(上書き)すればよいとのこと。
で、どうやるの！？(´・ω・｀)
まずプロジェクトフォルダ/app/assets/javascript/以下にckeditorフォルダを作る
そのckeditorフォルダ直下にconfig.jsというファイルを作成する。
これでオーバーライドする準備は整いました！
で、重要なconfig.jsの中身ですが、これは次回書きたいと思います！笑
RubyOnRailsでオートコンプリートをテキストフィールドに表示する方法のまとめ
RubyOnRailでオートコンプリートをテキストフィールドに表示させる実装を行ったので、覚えているうちにまとめておこうと思います。
■完成形
こんな感じでオートコンプリートができるようにします。
■方法の選定
ググってみると何パターンか方法がありました
方法：【text_field_with_auto_complete】を使用する
メリット：完成のイメージが一緒なのでやりやすそう
方法：【suggesut.js】を使用する
メリット：sggesut.jsの拡張ができそうなので、今後カスタマイズができそう
方法：【rails4-jquery-autocomplete】を使用する
メリット：一番手軽に実装ができそう
今回の実装ではカスタマイズが不要であったため、
【rails4-jquery-autocomplete】を使用する方法で実装を行いました。
■気をつけるポイント
・各種必要なgemがちゃんとインストールされていることを確認する
・form_forで実装するとうまく機能しなかったため、急遽form_tagに実装を切り替えました
※よくよく考えて見ると恐らく自分が単純に間違っていただけっぽい汗
以上。
