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
-, ,

執筆者:

関連記事

no image

Rails3でTwitter Bootstrapのサーチフォームを実装する~form_tag

目次1 git & gitolite2 仕組みを考える3 フィーチャの作成4 Viewの作成5 Controllerの作成6 Modelの作成7 テストが通らない!8 mergeして終わり g …

Backbone.jsのためにRails3.2でJSON APIをつくる~RABL

no image

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

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

Rails3.2でdocxを作成

目次1 途中経過2 次にrubyのスクリプトから同じことをしてみる3 Railsから試してみる4 うまくいきました 途中経過 github.com/jawspeak/ruby-docx-templat

SASS/SCSS+COMPASS+zurui-sass-railsで角丸・グラデ・半透明・テキストシャドウ・ボックスシャドウ

By: Ole Houen – CC BY 2.0 sass-lang.com/ Sassの基礎 (全15回) ドットインストール ネストを覚えた人のためのSassの便利な使い方 comp …