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でBackbone.jsとPrivate_pubでToDoアプリをリアルタイム化(できた!)

参考 Rails3.2でリアルタイムメッセージング~Private_pub、Faye Rails3.2とBackbone.jsでToDoアプリを作ってみた~backbone-on-rails &nbs …

Rails3でajaxでD&Dでまとめてファイルアップロード2~jQueryFileUpload for Rails

  前提 Rails3でajaxでD&Dでまとめてファイルアップロード~jQueryFileUpload for Rails Ruby on Rails 3.2でファイルアップロード …

Rails4でフォーム要素を動的に追加したり削除したり〜nested_form

目次1 参考2 前提の環境3 Gemfile4 View5 Controller6 できた7 パーシャル化8 フォームを追加する場所を指定する9 一対一の場合10 そのほか11 番外編: 1つのモデル …

RailsでECサイトを構築3 日本にあわせる~spree

  前提 RailsでECサイト構築~spree RailsでECサイト構築2 注文してみる~spree 目次1 テンプレートをダウンロード2 テンプレートを改造する3 デフォルトの国を変更 …

Rails4.1に対応したRefinery CMS 3.0を試してみた

By: Alexis Madrigal – CC BY 2.0 目次1 Refinery CMS2 Gemfile3 generate4 configファイル5 起動6 管理画面7 トラブ …