RailsでTinyMCEを使って高機能エディタを実装する

この記事で行うこと
使うもの
前提
実装手順
参考
ソースコード
質疑応答

この記事で行うこと

TinyMCEを使って、チケット内容を記述するエディタを実装します。

TinyMCEはCMSなどでよく導入される高機能エディタです。一からマークダウン機能がついたエディタやプレビューがついたエディタを実装するのは大変です。 TinyMCEを利用すればすぐにサービスに高機能エディタを実装することができます。

使うもの

Ruby 2.4.2
Rails 5.1.6
inymce-rails 4.8.0

前提

Chart.jsでおしゃれでかっこいいチャートを実装する - さがえもんを完了していること。

実装手順

インストール

Gemfile

gem 'tinymce-rails'
gem 'tinymce-rails-langs' # 日本語対応用

bundle install

初期化

app/javascript/packs/application.js

//= require tinymce

TinyMCEの設定をymlファイルで行います。

config/tinymce.yml

toolbar: # エディタのツールバーに表示されるもの
  - styleselect | bold italic | undo redo
  - image | link
plugins: # オプション機能を
  - image
  - link

app/javascript/packs/tiny-mce.js

tinyMCE.init({
  selector: 'textarea.tinymce', # エディタにしたいセレクタを指定 f.text_area :body...class: 'tinymce'
  language: 'ja' # 言語を日本語に設定
});

app/views/tickets/new.html.haml

.col-md-12
  = form_with(model: @ticket, local: true, html: { class: 'form-horizontal', role: 'form' }) do |f|
    - if @ticket.errors.any?
      ・・・・
    .form-group
      = f.label :title, class: 'col-sm-2 control-label'
      .col-sm-10= f.text_field :title, class: 'form-control', required: true
    .form-group
      = f.label :body, class: 'col-sm-2 control-label'
      .col-sm-10= f.text_area :body, class: 'tinymce', rows: 20, cols: 120, required: true # 修正
    .form-group
      = f.label :number, class: 'col-sm-2 control-label'
      .col-sm-10= f.number_field :number, class: 'form-control'
    .form-group
      = f.label :expired_at, class: 'col-sm-2 control-label'
      .col-sm-10= f.datetime_field :expired_at, class: 'form-control'
    .form-group
      .col-sm-offset-2.col-sm-10
        = f.submit class: 'btn btn-primary'
= javascript_pack_tag 'tiny-mce' # 追加

するとチケット作成画面に以下のようなエディタが表示されるようになります。

f:id:sksksksksk:20180730203731p:plain

チケット一覧画面で表示してしまうと内容で画面が埋め尽くされてしまうので、省略します。

app/views/tickets/index.html.haml

.col-xs-12
  %table.table
    %thead
      %tr
        %th
        %th チケット名
        %th 内容 # 削除
        %th.text-center チケット販売可能枚数
        %th.text-center 締切日
        %th
    %tbody
      - @tickets.each.with_index(1) do |ticket, index|
        %tr
          %td= index
          %td= ticket.title
          %td= ticket.body # 削除
          %td.text-center= ticket.number
          %td.text-center= ticket.expired_at
          %td.text-center= link_to '詳細', ticket, class: 'btn btn-block'

詳細画面では他の情報と切り離して表示をします。

app/views/tickets/show.html.haml

.col-xs-12
  .page-header{ 'ticket-id': @ticket.id }
    %h3 チケット概要
  %table.table
    %thead
      %tr
        %th チケット名
        %th.text-center チケット販売可能枚数
        %th.text-center 締切日
    %tbody
      %tr
        %td= @ticket.title
        %td.text-center= @ticket.number
        %td.text-center= @ticket.expired_at
  .row
    .col-xs-12
      = @ticket.body.html_safe

  .page-header
    %h3 チケットデータ
  .ticket-show-chart-wrapper
    %canvas{ id: 'chart', width: '900', class: 'chart' }
= javascript_pack_tag 'ticket-show-chart'