久々の投稿になってしまいましたが、ちゃんと投稿していこうと思います。

 

自分が個人で請け負っているお仕事で、運営者に手軽に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"にいろいろオプションを指定できるようですが、それはまた今度の機会にいじろうかと。

これで以下のようなエディタが実装されます。

スクリーンショット 2015-02-08 17.54.50

 

 

 

 

 

データは以下のように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>&nbsp;</p>
1 row in set (0.00 sec)

ckeditorは、dragonflyやcarrierwaveやpaperclipとも親和性がいいようなので、それはまた次回試してこちらのブログで公開したいと思いますー。