久々の投稿になってしまいましたが、ちゃんと投稿していこうと思います。
自分が個人で請け負っているお仕事で、運営者に手軽にHTMLを作成&編集してもらう必要があるため、WYSIWYGを導入してみることにしました。
WYSIWYGとは、WordPressやブログなどのように記事を書くエディタみたいなものです。
http://ja.wikipedia.org/wiki/WYSIWYG
さて、システムはruby on rails4で構築しています。
導入するWYSIWYGエディタは”ckeditor”というプラグインです。
githubも公開されております。
https://github.com/galetahub/ckeditor
ruby と railsのバージョンは以下の通り
ruby 2.1.3p242 (2014-09-19 revision 47630) [x86_64-darwin14.0]
Rails 4.1.6
下準備です。
Gemfileに以下を追加
gem 'ckeditor'
んで、bundle installを実行
bundle install
そうすると以下の2つをインストールしてくれます。
Installing orm_adapter 0.5.0
Installing ckeditor 4.1.1
続いて、application.jsを編集
vim app/assets/javascripts/application.js
以下の文を追加してください。
//= require ckeditor/init
これで準備完了。
今回は、すでにModelは作成済みなのですが、ckeditorで作成したドキュメントを保存しておく領域をModelで作成しておく必要があります。
<pre>class CreateTrainings < ActiveRecord::Migration</pre>
def change
create_table :trainings do |t|
...
...
t.text :contents
...
end
end
今回は、text型で"contents"というカラムにckeditorで記述したコンテンツを保存したいと思います。
んで、viewには以下のように記述します。
<div class="field">
<%= f.label :contents %><br>
<%= f.cktext_area :contents, :toolbar => 'full' %>
</div>
"cktext_area"を指定すればすぐに実装できます。
":toolbar"にいろいろオプションを指定できるようですが、それはまた今度の機会にいじろうかと。
これで以下のようなエディタが実装されます。
データは以下のようにHTMLで保存されます。
mysql> select contents from trainings where id = 3\G
*************************** 1. row ***************************
contents: <ol></span><span class="s1"><li>テスト</li></span><li>テスト</li></ol><table border="1" cellpadding="1" cellspacing="1" style="width: 500px;">
<tbody><tr><td>表</td><td>表</td></tr><tr><td>テスト</td><td>テスト</td></tr><tr><td>テスト</td><td>テスト</td></tr></tbody></table><p> </p>
1 row in set (0.00 sec)
ckeditorは、dragonflyやcarrierwaveやpaperclipとも親和性がいいようなので、それはまた次回試してこちらのブログで公開したいと思いますー。