Rails5でCKEditorを埋め込んで記事ソースを出力する

Rails ruby ckeditor

f:id:Wideplain:20170926182916p:plain RailsとCKEditor、Materializeで記事マークアップアプリを作りました。 名前は香ばしいですが、そこは気にせず技術的な話をしていきます。

概要

プレーンなテキストではニューサイトやブログをフレームワークで作った場合、段落管理(pタグ)や見出し管理(hタグ)、画像埋め込み(img)などがめんどくさいですよね。 CMS用のプラグインないしGemは色々あるようですが、今回はCKEditorを使います。 管理画面などにこれを埋め込むことでHTMLタグの自動マークアップをアプリが全部やってくれるようになります。 CKEditor自体はgithubで公開されているのでcloneして組み込んでいく方法もあると思います。今回は開発時間短縮のため全部Gemでやります。

最終目標

CKEditorを実際にform_forで実装した画面

f:id:Wideplain:20170926170627p:plain

出力結果

f:id:Wideplain:20170926170701p:plain ここではあえてプレーンなテキストとしてRawのHTMLマークアップを出力しています。この処理をどうにかすればブログ投稿などに応用できるでしょう。

開発開始

Rails newする

$ rails new editor

追加したGem

Gemfile

~省略~
gem 'materialize-sass' #見た目を整えるためCSSフレームワークを導入
gem 'devise' #ユーザー認証
gem 'carrierwave' #画像のアップデート
gem 'mini_magick'
gem 'ckeditor' #CKEditorそのもの
gem 'jquery-turbolinks' #jquery動かない対策　
~省略~

この時、一応CarrierwaveとMini_magickを入れないとCKeditorの全機能が使えず最悪動きません。

bundle install

ターミナル
$ bundle install

$ rake db:create

$ bundle update  # bundle updateしないとCKEditorが動かないらしい

コーディング

ターミナル
$ rails g scaffold post title body:text #記事を書けるようにTitleとbodyカラムを作る

$ rake db:migrate

$ rails generate ckeditor:install --orm=active_record --backend=carrierwave #ckeditorをRailsにインストール

本番環境でもCKEditorを動かせるようにproduction.rbに以下を記述

production.rb
Rails.application.configure do
# ~省略~
  config.assets.compile = true #記述をtrueにする
# ~省略~
  config.assets.precompile += Ckeditor.assets
  config.assets.precompile += %w( ckeditor/* )
  config.autoload_paths += %W(#{config.root}/app/models/ckeditor)
end

form_forに埋め込んでいく

ここではScafolldでできた_form.html.erbに書いていきます

_form.html.erb
 <%= form_for(post) do |f| %>
  <% if post.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(post.errors.count, "error") %> prohibited this post from being saved:</h2>

      <ul>
      <% post.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= f.label :title %>
    <%= f.text_field :title %>
  </div>

  <%= form_for @post do |f| %>
  <div><%= f.cktext_area :body, class: "hogehoge" %></div>
  <div class="row new--post__submit">
  <%= f.submit "送信", class: "waves-effect waves-light btn" %>
  </div>
  <% end %>
<% end %>

ここのポイントはf.cktext_areaの一行。この記述があることでform_forでRailsにCKEditorを実装してパラメーターを送れます。

MaterializeでViewを整える

任意で各Viewファイルをデザインしていきます。今回は割愛。

プリコンパイルする

ターミナル
$ rake assets:precompile

これをしないと本番環境で動かない。

これでCKEditorの実装は終わり。 Githubに公開しているのでご自由に。

GitHub - wideplain/KamiEditor: 記事形式のテクストを出力するアプリケーション