joppot

コピペで絶対動く。説明を妥協しない

プログラミング

ruby on railsに最強のwysiwygエディタ、Squireを導入する

投稿日:2015年3月2日 更新日:

Pocket

feffa094

概要

みなさんこんにちはcandleです。今回はruby on railsにsquire editorを導入したいと思います。

squireはオープンソースの便利なwysiwygエディタです。
カスタマイズ性に優れていて、今までckeditorやredactorなど試しましたが、これからはsquireの時代だと確信しています。
これをrailsに組み込んで行きたいと思います。

Squireは基本的にデザインが無い、いわば、wysiwygエディタを作るためのエンジンみたいなものです。

デザインは各自自分でつけるのですが、これが以外に難しいので、
ここはsquireの公式ページにもあるようにtwitter bootstrapにそったデザインを導入して解説します。


前提

適当なrailsプロジェクトがある。

twitterbootstrapがgemか手動で導入されている
今回はtwitter bootstrap gemを使って解説します。

ruby on rails4でtwitter bootstrap 3のgemを使用してscaffoldを作成する

もちろん、分かっている人は手動でbootstrapを導入してもよいです。

SPONSORED LINK


Squireのスキャホルドを作る

サンプルと言えばscaffoldです。これを使って解説していきます。
ちなみに、squireのgemはまだ存在しないので、手動で導入します。
まずは適当なrailsプロジェクトで下のコマンドを入力して、scaffoldを作ります。
ちなみに、下のSquireというのはただの名前なので意味はありません。別の名前でも構いません。

rails g scaffold Squire title:string description:text

dosquirejs

scaffoldで作成されたマイグレーションファイルを実行してデータベースに反映させます。

bundle exec rake db:migrate

anmigrationsquire

データベースが用意されました。

twitter bootstrap gemを使用して、bootstrapのスタイルを適応します。

rails g bootstrap:layout application
rails g bootstrap:themed Squires

これを実行すると、テーマがファイルに自動的に書き込まれます。
実行すると分かる様に、すでにファイルが存在するので、コンフリクト(衝突)が起きてしまいます。

上書きを許可しましょう。質問されたら「y」と答えれば良いです。

scaffoldが完成しました。
サーバにアクセスして確認します。

bundle exec rails s

squireoftest

これで準備が整いました

squireをダウンロードする

それではgithubからライブラリをダウンロードします。

https://github.com/neilj/Squire

サイトの「Donwload ZIP」からダウンロードします。

neiljSquiredownloadzip

zipを解凍したら、

buildの中の「squire-raw.js」を使用します。

なぜrawを使う理由は今回は解説しませんが、
今後カスタマイズして行く上で、圧縮されていると使いづらいからです。

squirerawjs

これをrailsプロジェクトの「app/assets/javascripts/」に配置します。

setappsquirejs

次に、やや微妙な事をします。
squireの公式ページにあるサンプルが使用しているjsとcssを取ってきます。
というのも、冒頭にも書いた様に、squire自体はエンジンなので、レイアウトやデザインなどないのです。
公式サンプルを使わせてもらいます。
下の2つをダウンロードしてください。

http://neilj.github.io/Squire/build/Squire-UI.js

http://neilj.github.io/Squire/build/Squire-UI.css

これをそれぞれ
jsは「app/assets/javascripts/」
cssは「app/assets/stylesheets/」
に配置します。

squirecssjs

メニューのhtmlをダウンロードします。
サンプルではメニューのhtmlを切り離して、jsで呼び込みそれを表示しています。

htmlをダウンロードします。

http://neilj.github.io/Squire/build/Squire-UI.html

これをpublicフォルダに置きます。

publicsquirehtml

サンプルではfontawesomeを使用しています。
もちろん、twitter bootstrap gemを使用していればこれも用意されています。

基本的にはこれで準備ができました。
細かな問題はあります。
ダウンロードしたcssがデザインに反映されてbootstrapのデザインが崩れるのでそれは各自直してださい。

scaffoldのviewを変更してsquireを使う

ブラウザの「New」ボタンを押すと、下のような画面になります。

squireviews

app/views/squires/_form.html.erbを変更します。
descriptionの項目を以下の様に変更します。

<%= f.text_field :description, :class => 'form-control',:style =>'display:none' %>
<%= f.text_area :description, :id=>"seditor" %>

changeforminput

本来表示されるdescriptionのテキストフィールドをcssで消し。
squireエディタを表示するテキストエリアを加えます。
idは適当です。

squireのcoffeeファイル(app/assets/javascripts/squires.js.coffee)に下の内容を書き込みます。
もちろん、_form.html.erbにjavascriptに変換して直書きしても構いません。

$(document).on 'ready page:load', ->
  UI = new SquireUI(
    replace: 'textarea#seditor'
    buildPath: "/"
    height: 300)

addimagecoffeesquire

ここではオプションを指定してます。
idがseditorのものをSquireエディタにして、
buidパスつまりメニューのSquire-UI.htmlが置かれている場所publicフォルダを参照する様にして、
高さを300にしています。

これだけではフォームから送信してもエディタの中身は送られません。

本来のdescriptionの項目はstyleで表示をオフにしています。
エディタで編集しているのはなんの属性もない、squireエディタです。
つまり、エディタに書かれた内容を送信前に、descriptionの本来のテキストフィールドに収める処理が必要です。
「app/assets/javascripts/squires.js.coffee」を開いて、下のコードを加えます。

  $('form').submit ->
    $('#squire_description').val(UI.getHTML()).change()
    return

changeformvalue_jpg

これで正しくどうするはずです。

ブラウザから見てみる

それではいったんブラウザから見てみましょう。

http://localhost:3000/squires/new

greateeditorofsquire

もしも、上の様になっていれば表示は成功です。

そのまま、エディタに書き込んで投稿してみましょう。
適当にboldなどの編集もくわえて、

custameditorofview

投稿し、view画面で以下の様にしっかり、descriptionの項目にデータが表示されれば保存されています。

successtoupload

うまくいきました。

updateフォームでも使える様にする

上の例では新しく作成し、保存したのでその様な設定で良かったのですが、
投稿したものを編集する場合は保存されている内容をrailsからsquire editor jsに投げる必要があります。
scaffoldの場合はapp/views/squires/edit.html.erbを開いて上の方に以下のコードを書きます。

<%= javascript_tag do %>
var $squire_description = '<%= raw @squire.description.gsub("'", "\\\\'") %>';
<% end %>

transportavalue

gsubを使ってシングルクォーテーションをエスケープしています。
こうしないとdescriptionに含まれているシングルクォーテーションで文字列が中断されてしまいます。

/app/assets/javascripts/squires.js.coffeeを開いてUIをnewしている次に以下を加えます。

  if typeof $squire_description != 'undefined'
    UI.setHTML $squire_description

allIaddthisdescription

if文で$squire_description変数があれば、それをsquireエディタに収めるコードを追加します。
これで新規作成も、アップデートも自由にできる様になりました。

まとめ

一応、ここにsquire.js.coffeeのコードを書いておきます。
jsで書きたい人はこれを変換して使ってください。

$(document).on 'ready page:load', ->
  UI = new SquireUI(
    replace: 'textarea#seditor'
    buildPath: "/"
    height: 300)

  if typeof $squire_description != 'undefined'
    UI.setHTML $squire_description

  $('form').submit ->
    $('#squire_description').val(UI.getHTML()).change()
    return

送られた値の編集やsquire js自体のカスタマイズは次回以降やっていきましょう。

スポンサードリンク

「為になったなぁ」と思ったら、シェアお願いします。

-プログラミング
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

railsのscaffoldでremote formで送信後jsonを取得する

概要 みなさんこんにちはcandleです。 今回はrailsのformをremoteを使ってajaxした時に、 サーバに送った値をjavascript側で受け取る方法を紹介します。 ちなみに、私は下の …

phpとmysqlでアカウント管理する時のテストユーザーのパスワードの暗号化はmysqlのsha1でもできる

by brewbooks 概要 みなさんこんにちはcandleです。最近はphpでサービスを書いたりしています。その中でテストユーザーのアカウント管理でパスワードを暗号化してデータベースに収めています …

wordpressのbogoプラグインのショートコードをカスタマイズする

English 日本語 概要 みなさんこんにちはcandleです。 今回はwordpress bogoのショートコードをカスタマイズしてみたいと思います。 紹介する項目は以下の2つです。 国旗の表示、 …

wordpressで任意のサブカテゴリー全てをget_categoriesで取得する

概要 みなさんこんにちはcandleです。今回はwordpress開発でよくあるサブカテゴリーを全て取得する方法を紹介します。 カテゴリー一覧をサイドバーに表示したい時があります。この時、get_ca …

wordpressのwp_queryでpost投稿の記事一覧を取得する

概要 みなさんこんにちはcandleです。 最近はwordpressの開発を行っており、そこで、試行錯誤したwp_queryを使った記事一覧の取得の仕方を紹介します。wordpressは少し前まで、q …

  • English
  • 日本語

プロフィール


ベンチャー企業のCTOをやってます。大学時代にプログラミングを始め、javaから入門し、C++へて、PHPへと進み、会社ではRailsを使用。自動化が大好きなプログラマー

スポンサードリンク

アーカイブ