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
-

執筆者:

関連記事

Rails3.2.8でテーブル並び替えのテストを作る~cucumberと正規表現

前提 Railsのテーブル並び替えを実装する Rails3.2.8で自動テスト環境を整える〜cucumber+spork+guard 目次1 作戦(ストラテジー)2 have_contentの正規表現 …

Rails4.0で添付したpdfファイルの中身を全文検索の対象にする〜carrierwave、pdftotext、pg_bigm

By: Uncalno Tekno – CC BY 2.0 環境 Ubuntu server 12.04 sunspot_cellにしようとおもってたけど、ライブラリとか勉強することが多く …

Rails4でつかえるインラインエディタを試してみた〜X-editable-rails

目次1 x-editable2 bootstrapを導入3 x-editable-rails4 サンプルアプリ x-editable 文字をダブルクリックして編集できるやつ x-editable vi …

no image

Rails3.2+MongoDBでつくったアプリをheroku+mongoHQにアップしたよ

Stack Overflowはなんでも答えてくれる エラーメッセージをコピーしてググればたいていの答えはStack Overflowで出尽くしている 目次1 Gemfile2 herokuにアプリ作成 …

no image

MongoidでMapReduceに挑戦中

MongoDBの薄い本の素材をMongoidでやろうとしたけど途中経過 MapReduceをやることの利点は、並列処理ができるということとSQLより柔軟な処理なできるということらしい(MongoDBに …