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

執筆者:

関連記事

Rails3.2とBackbone.jsでGoogle CalendarライクなカレンダーにCRUD(後編)~fullcalendar-rails

目次1  前回2 UPDATE1~バグの訂正3 UPDATE2 ~ ドラッグとリサイズでデータ更新4 DELETE~イベントの削除5 バグがあった → 解決しました!6  herokuにサンプルアップ …

Rails3.2でHTML5で取得した位置情報をMongoDBに保存してGoogleMapsでみる~mongoid、gmaps4rails

前提 Rails3.2でhtml5で取得した位置情報をAjaxで住所表示する~geocoder 目次1 Mongoid2 スケルトンを作る3 Gmap4railsのインストール4 とりあえず地図を表示 …

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

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

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

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

Rails5でマテリアルデザイン~material_design_lite-sass

By: AnnaKika – CC BY 2.0 目次1 マテリアルデザイン2 gem3 scss & javascript4 Turbolinksに対応5 simple_form …