続いて、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>&nbsp;</p>
1 row in set (0.00 sec)


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