質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

8679閲覧

RubyプログラムにJavascriptを埋め込みたい

退会済みユーザー

退会済みユーザー

総合スコア0

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

1グッド

4クリップ

投稿2015/12/31 07:18

編集2016/01/01 06:20

###前提・実現したいこと
RubyのプログラムにJavascriptの変数を埋め込みたいのですが、どのようにしたら良いのか分かりません・・・。
下記コードのJavaScriptの変数「output」をRubyの「qiita_markdown」メソッドに引数で渡したいと考えております。
RubyのコードをJavaScriptに埋め込むことはできても、JavaScriptのコードをRubyに埋め込むことはできないのでしょうか・・・。
もしご存知のかたいらっしゃいましたら教えていただけますでしょうか。
よろしくお願いします。

###ソースコード

<script type="text/javascript"> function preview() { var output = ""; var targets = $("#item_content"); for (var i = 0; i < targets.length; i++) { output += targets[i].value + "\n"; } $("#preview").html('<%= j(qiita_markdown(output)) %>'); } jQuery(document).ready(function($){ $("#item_content").bind('keyup change', function() { preview(); }); }); </script>

2015.01.01追記

Rails JavaScriptの変数を渡したい
↑こちらの質問とほぼおなじ内容になってしまったので本質問に集約致します。

telsa👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

作成方針だけを述べます。

  1. controller に param[:test] を処理して、markdown に変換した結果を返すようなメソッドを用意する。

routes.rb に そのメソッドを呼び出すような url の定義を追加する。
2. _form.html.erb に <div id="preview"></div> を追加する。
3. textarea での keyup, change イベントをキャッチする。($('#page_body').on ... )
4. イベントをキャッチしたら textarea の 内容を得る。 ($('#page_body').val())
その内容をパラメータに設定して、1 で作ったメソッドを ajax 呼び出して、変換結果を得る。
変換結果を $('#preview') に設定する。

追記: 2016-01-01
実際に作成してみました。
https://github.com/katoy/qiita_markdown_example

リアルタイムにプレビューしている様子をアニメーションgif で示しています。
イメージ説明

投稿2015/12/31 08:31

編集2015/12/31 15:07
katoy

総合スコア22324

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2016/01/01 06:24

できました! サンプルのリポジトリまで作成していただいてとても良くわかりました! 自分には難しかったのですが、サンプルを参考にして、綺麗にプレビューできることが確認できました! ありがとうございます、大変助かりました! 救世主です!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問