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

執筆者:

関連記事

TwitterBootstrapでアイコンが微妙な感じだったらFontAwesomeを試してみるといい

かもしれない fortawesome.github.com/Font-Awesome/ hallojsで使ってるのは上 github.com/bokmann/font-awesome-rails gi …

no image

Rubyでxmlの要素の追加など~nokogiri

目次1 はじめに2 文字列をパースしてxmlとして読み込んでそのままxmlとして出力する3 nodeの追加4 nodesetの作成と追加5 DocumentFragmentの作成と追加 はじめに 参考 …

FullCalendarのagendaViewでselectの場所がずれる問題

  By: Ben Piddington 前回 Rails3.2でGoogle Calendarライクなカレンダーを使う〜fullcalendar-rails   gemは最新の1 …

三目並べゲームのAI〜原始モンテカルロ法

By: Luca Galli – CC BY 2.0 目次1 ゲーム用のAI2 シャローコピー3 AI4 勝率 ゲーム用のAI 三目並べのAIを考えてみた. 有効手をリストアップして、おの …

Rails3.2でよくあるデータ構造を追加してくれる系のGemのメモ〜タグ付け、評価システム、バージョン、論理削除、木構造とか

By: Jeff Dlouhy – CC BY 2.0 よくある構造というかよくあるスキーマを追加してくれるModelに一言書いておくだけで便利なGemをメモ(未検証)   目次 …