2009年5月19日 星期二

Rails Rich editor, TinyMCE, jquery, attachment_fu, ja_tiny_mce

因為想要提供Rails Rich Editor 的功能, 就找到了 tiny_mce plugin 可以很簡單的把 TinyMCE editor 整合進來,
但是因為很貪心的想要有可以插圖的功能所以就找到了 tiny_mce_plus, 可是沒想到他是用prototype , 我想用jquery 阿, 所以又找到了j_tiny_mce
可是又沒想到他卻是用 paperclip 我已經有用attachment_fu 了 不想再弄一套阿, 加上這個也跑不起來 @@, 只好自己動手改了這個九成都是別人code 的 plugin ja_tiny_mce



1: 安裝 ja_tiny_mce, migrate 存上傳圖檔時需要的東西

cd vendor/plugins
git clone git://github.com/ilake/ja_tiny_mce.git


script/generate ja_tiny_mce_migration
rake db:migrate


2, 安裝需要的 plugins:

rake ja_tiny_mce:plugins

這邊會把attachment_fu, responeds_to_parent, will_paginate 到你的plugin 資料夾, 因為需要用到jquery 所以include 一下jquery file 或者 安裝一下 jrails

還有因為上傳圖一定會用到 user , 我們這邊用的是restful_authentication 來做登入登出
當然你可以把 TinyMcePhotosController 的 current_user 改成你相對應的user

3, layout 裡要include TinyMCE 需要的js:
<%= javascript_include_tiny_mce_if_used %>
<%= tiny_mce if using_tiny_mce? %>

4, controller 裡要加上 uses_tiny_mce 做設定:

uses_tiny_mce(:options => AppConfig.default_mce_options, :only => [:new, :edit])

AppConfig.default_mce_options 在 config/initializers/tiny_mce_plus_config.rb 你可以改變default的設定或加入自己的


5. View 裡面要設定哪個textarea 你要用tinymce

:class => "mceEditor"

6. 安裝需要的controller, view, helper
rake ja_tiny_mce:install

will Install following files:

app
|-- controller
|-- tiny_mce_photos_controller.rb
|-- helpers
|-- remote_link_renderer.rb
|-- models
|-- tiny_mce_photo.rb
|-- views
|-- tiny_mce_photos
|-- _photo_list.html.erb
config
|-- initializers
|-- tiny_mce_plus_config.rb

public
|-- images
|-- tiny_mce
|-- javascripts
|-- tiny_mce



其他:

1. 上傳圖片時跳出的視窗view 是在 public/javascripts/tiny_mce/plugins/curblyadvimage/image.htm 裡, 有需要就自己改吧
2. 用到的function 在這 public/javascripts/tiny_mce/plugins/curblyadvimage/js/functions.js

沒有留言: