jQuery Railsで使えるGem

Rails3.2でみたまま編集 〜hallo editor

投稿日:

 

文字をダブルクリックしてそのままフォーム編集するやつのメモ~in place edit

文字をダブルクリックしてそのまま編集するのを簡単に導入したくて、いろいろ試した

とりあえずcreate.jsは諦めた RDFaとか分かる人に なんかそういう高度なマークアップの実現が主眼ぽい

簡単そうなhallo.jsを使ってみた

github.com/bergie/hallo

準備

Gemfile

bundle

* もともとgithub.com/samerbuna/halloというgemがあったんだけど、古いhello.js(1.0.0)はjQuery1.9と相性が悪いらしく、gemをブランチして本家の修正済みのバージョンを使うことにした(1.0.1dev)

github.com/seventhsense/hallo-rails

リポジトリ名が本家と被ったからリネームしちゃった

gemの方も本家が正式リリースしたら追従するんじゃないかな

またhalloエディタが依存するrangy.jsもオレオレブランチに同梱しておいた(MITライセンスなんで大丈夫なはず もし問題があったらこっそり教えて下さい)

* jQuery UI Rails 4.0.0系では今のところ動かない(2月10日現在 ver 4.0.1)

プラグインを指定したときにこういうエラーが出ます

jQuery UI Rails 4.0.0はjQuery UI1.10へのアップグレードですが、現在、Halloの方でjQuery  UI 1.10へ対応するパッチのプルリクエストが出てます

*うえのプルリクエストがマージされてhallo.jsのバージョンが1.0.2になり、jQuery UI 1.10でも使えるようになりました

application.js

 application.css

font-awesomeとjquery-ui-themesはhalloが依存しているのでbundleでインストールされるはず

使い方

こんなhtmlがあったとすると

こんな感じで

対象を編集できるようになる

ただ、このままだととうぜんデータは更新されないのでこんなかんじでイベントをバインドする必要がある

参考

stackoverflow.com/questions/4007605/using-http-put-to-send-json-with-jquery-and-rails-3

テキストじゃなくてHTMLで編集する

こんな感じでタグ付きで保存・出力できるようにしておいて

こんなオプションをつければOK

HTMLタグ付きで編集できる

screenshot

 

やだ、わたしのテーマきたない!?

公式のデモをみてみると美しい

screenshot

(つд⊂)ゴシゴシ

さっきの自分のやつ

screenshot

・・・というわけで公式を参考にしながらいろいろオプションを設定すると

halloblockっていうのはまだマニュアルに出てきてないオプション

screenshot

TってボタンでH要素を選べる。 うーん、こういう趣向!?

screenshot

 

しかもエラー

これはjQuery.browserっていう古い確認の仕方をしてるからぽい

今回はヘッダー要素はいらないので直すのは諦めました(他のメニューはだいたい機能しました.ただ画像挿入が使い方がわからないという.)

* 方向性としては、jQuery.supportからjQuery.browserを返すラッパーというかプラグインを作るとほかの古いプラグインも使えて汎用性があると思うんだけど(アイデア)

下を参考に

w3g.jp/blog/tools/js_browser_sniffing

jQueryによるブラウザ判定サポート終了

* 公式のjQuery-migrate使ったら無事機能しました!

github.com/jquery/jquery-migrate

code.jquery.com/jquery-migrate-1.1.0.js

その他の1.9との互換性問題はここで語られています

github.com/bergie/hallo/issues/136

変更があったときだけ更新

hallomodifiedなんて便利なイベントがあるのでこうしたら変更があったときだけ更新する

 

こちらでサンプルをherokuにアップしました

-jQuery, Railsで使えるGem
-

執筆者:

関連記事

CarrierWaveで添付したファイルをrroongaで全文検索

By: Alan Levine – CC BY 2.0 目次1 Carrierwave2 rroonga3 Gemfile4 application.rb5 config/initiali …

全文検索エンジンGroongaをRubyから利用するライブラリのチュートリアルをやってみた〜rroonga

By: Kevin Jarrett – CC BY 2.0 目次1 Groonga2 Groongaのインストール3 rroongaのインストール4 チュートリアルの開始5 データベースの …

Railsでhtmlファイルやリンク先のスクリーンショットを撮影~IMGKit&wkhtmltoimage

  github.com/csquared/IMGKit 目次1 環境2 wkhtmltoimageのインストール3 imgkitのインストール4 試す5 日本語フォント 環境 ubuntu …

Rails3.2+jQueryUI1.10でjQuery-UI-Bootstrapのデモ画面を出すところまでやった

なにかいつの間にかかっこいい感じのサイトになってた addyosmani.github.com/jquery-ui-bootstrap/ jquery-ui-bootstrap.github.io/j …

RailsでECサイト構築7 デプロイ~spree+apache2+passenger

  前提 Rails3.2のアプリをデプロイ~apache+passenger+postgresql Rails3.2+Apache2+Passenger環境でSSLを使ってみる &nbsp …