Backbone.js Railsで使えるGem

Hallo.jsのMarkdownをWYSIWYGで編集できるサンプルがぐう便利だったのでRails3.2とBackbone.jsでやってみた

投稿日:

2013-02-03_21h11_34

hallojs.org/demo/markdown/

これ  とにかく一度さわってみて欲しいんですけど

サンプルの便利ポイント

下のテキストエリアにマークダウンを入力すると直ちに上のプレビューに反映

2013-02-03_21h18_20

プレビューエリアもhallo.jsで直接書き込み可能

2013-02-03_21h16_18

もちろんタイトルも直接編集OK

2013-02-03_21h19_09

 

メニューバーから直接装飾できる

もちろんアンドゥ・リドゥもできる

2013-02-03_21h20_02

Rails3.2とBackboneで動かしてみる

ライブラリの準備

とりあえず動かすのに必要なライブラリはhallo.jsに必要なやつ一式Showdown.jsto-markdown

ShutdownはマークダウンをHTMLに、to-markdownはHTMLをマークダウンに変換するJavaScriptライブラリ

ライブラリはvendor/assets/javascriptあたりにapplication.jsでライブラリを読み込むのを忘れずに

ついでにapplication.css

 

動いたコードはこれ

ソースから無理やり動かしてるから改善の余地はたくさんあると思う

動かし方は

ポイントはちゃんとテンプレートを描画してから、エディターを設定しないとダメってこと

herokuにサンプルあげてみた

evening-ravine-7560.herokuapp.com/

 

-Backbone.js, Railsで使えるGem
-, ,

執筆者:

関連記事

Backbone.jsからjQuery UIのDialogを使う例

Backbone.js楽しくなってきた 部品ごとのクラスをつくって、それに飾りとイベントをつけて、あとは上位部品から呼び出してくっつけるだけ jQuery UIのダイアログの場合は、公式のサンプルだと …

Rails3.2でajaxなフォルダツリーを導入する2~dynatree-rails

  目次1 jQuery ajax送信側2 app/views/folders/show.js.coffee3  で、コントローラーを設定4 今までのは置いといてJsonでやり取りするアプロ …

Backbone.js0.9.10以降のクライアントサイドでのvalidate

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

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

Rails3.2でJasmineをつかってCoffeeScriptをテスト~jasminerice

    #261 Testing JavaScript with Jasmine (revised)   addyosmani.github.com/backbone-f