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
-

執筆者:

関連記事

no image

Rails3.2.8で自動テスト環境を整える〜cucumber+spork+guard

環境 ruby 1.9.3 & rails 3.2.8 参考 cucumber + spork + guard + factory_girl あってもよいが[crayon-58aaaa180f …

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

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

Rails4とD3.jsでローソク足グラフを描く〜d3.js編

前回 Rails4とD3.jsでローソク足グラフを描く〜Rails準備編 目次1 jsonデータ2 y_scaleを考える3 始値と終値から箱をつくる4 高値と安値でひげをつくる5 y_axisをつけ …

Rails3.2とBackbone.jsでサーバーサイドのページネーション

By: Haldane Martin – CC BY 2.0   前提 Rails3.2とBackbone.jsでサーバーサイドのフィルタリング Rails3.2とBackbon …

RailsでECサイト構築2 注文してみる~spree

  前提 RailsでECサイト構築~spree さっきは日本に発送できなかったので、最小限の設定をして注文から入金・発送までの一連の流れをみてみる 目次1 設定2 注文してみる3 入金・発 …