railsでtinymceで遊ぶ

Jul 7, 2020 2 分で読める

今回はrails5でtinymceの実装方法について軽く紹介します。実運用というより、とりあえず動かして触りたい人向けですね。

環境

Rails 5.1.7 ruby 2.6.5

前のブログより環境下がってるじゃねぇかというツッコミもあると思いますが、まぁこういうこともあるのがエンジニアってもんですよね。

プロジェクト作成

rails _5.1.6.2_ new tinymce-test -d mysql
cd tinymce-test
rails db:create
rails db:migrate

まぁDBは今回は使わないんですけどね（） gemファイルにtinymce-railsを追記してインストールします。

echo 'gem "tinymce-rails"' >> Gemfile
bundle

configの中で、tinymce.ymlを作成してから、下記のコンテンのように作りましょう。

[config/tinymce.yml]

theme_advanced_toolbar_location: top
theme_advanced_statusbar_location: bottom
theme_advanced_buttons3_add:
  - tablecontrols
plugins:
  - table
  - image
toolbar:
  - undo redo | formatselect | fontselect | fontsizeselect | bold | italic | underline | alignleft | aligncenter | alignjustify | alignright

tinymce.ymlは、TinyMCEの設定ファイルですね。

plugins：プラグインを追加
- table：テーブル関係
- image：画像関係
- code ：コードを直接編集

プラグイン一覧

application.jsの中でtinymceをrequireします

[app/assets/javascripts/application.js]

// require tinymce

これで準備完了です軽く触れるようにトップページを作成します。

rails g controller home index

routesを記載します。post先なども追加します。

[config/routes.rb]

  root to: "home#index"
  post '/test', to: 'home#create'
  get '/test' => redirect("/")
  get '/image', to: 'home#image'

上から

ルートの定義
ルートからpostで値を送信するための定義
ルーティングエラーでUX悪かったのでそのために書いた（なくてもいい）
画像表示テスト用（なくてもいい）

コントローラーを記載します。

[app/controllers/home_controller.rb]

class HomeController < ApplicationController
  def index
    
  end

  def create
    render :index
  end

  def image
    f = File.new("./app/assets/images/test.jpeg", "r")
    send_file f,
    filename:    "sample.jpeg",
    type:        "image/jpeg",
      disposition: "inline"
  end
end

imageに関しては該当のパスにtest.jpegを配置する。

[app/views/home/index.html.erb]

<h1>tinytextサンプル</h1>
  <%= params[:content].html_safe if params[:content] %>
  
  <%= tinymce_assets %>
  <%= tinymce %>

  <%= form_with url: "/test", local: true do |f| %>
    <%= f.submit "表示" %>
    <%= f.text_area :content, :class => "tinymce", :rows => 40, :cols => 120, value: params[:content] %>
  <% end %>

<%= tinymce_assets %> <%= tinymce %>は読み込みようですね。もうちょっと置く場所は考えてもいいと思う><

サーバーを起動して、動けば完了です

rails5

railsでtinymceで遊ぶ

環境

プロジェクト作成

Nakano

Back-end engineer