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のproduction環境で動画再生~flowplayer+carrierwave+nginx+unicorn

  By: Creative Tools – CC BY 2.0 目次1 前提2 unicornの設定3 nginxのインストール4 nginxの設定5 アセット関係6  ストリ …

no image

CarrierWaveのファイルをpublic以外に移す

  参照 How To: Secure Upload 現状でCarrierWaveのファイルがpublicという公開フォルダに置かれるのが気になったので調べてみた 違ってるかもしれないので自 …

no image

Rails3.2からBackbone.jsとD3.jsを使う一例

目次1 Backbone.jsからD3.jsを使う2 RailsのネストしたURLでBackboneを使う Backbone.jsからD3.jsを使う d3.jsで力指向グラフを使って遊ぶ2のクラス構 …

Rails3.2とBackbone.jsでサーバーサイドのソーティング

By: Haldane Martin – CC BY 2.0   Rails3.2とBackbone.jsでサーバーサイドのフィルタリング 次はソートを実装したい 目次1 サーバ …

もしもRails3.2とBackbone.jsでリアルタイムな2ch風な掲示板をつくったら〜private_pub

By: Kevin Dooley – CC BY 2.0   まだ、Observerのことがよくわかってない ので、過去のやつをもとにやってみた dry-shore-2517.h …