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

執筆者:

関連記事

テキストマイニングの初歩 Rubyで形態素解析を行う〜ruby-mecab

By: Cracker Jack – CC BY 2.0 環境 ubuntu server 12.04 英語は単語を空白で区切るのでコンピュータでの解析に向いているが、日本語は助詞などを続 …

Rails3.2からMongoDBを使ってアプリをつくってみる~mongoid

MongoDBはとても素直で扱いやすいということがわかってきたので、以前作成した郵便番号・住所の相互検索アプリをまたつくってみた 参照 MongoDBのチュートリアルをこなす KEN_ALL.CSVを …

Backbone-formsをさわってみた

github.com/powmedia/backbone-forms backbone-formsの特徴 簡単なスキーマでフォームを生成 バリデーション ネストしたフォーム 使えるそしてカスタマイズ可 …

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

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

Ubuntu Server 12.04.1にいま流行のDiscourseをインストールしてみた

By: Wonderlane – CC BY 2.0 目次1 はじめに2 環境3 インストール4 情報 はじめに すでにGitHubのトレンドRepoでスター数がTwitterのFligh …