qiitamarkdownのプレビュー画面をboorstrapのモーダルウィンドウで表示する

Q&Aサイト等で投稿内容をMarkdown形式で書いて、投稿前に確認出来るプレビューWindowを作りました。 Bootstrap3でモーダルウィンドウというものがあるので簡単にいい感じのWindowが使えました。

Markdown形式をHTML形式に変換してくれるライブラリqiitamarkdownについてはこちら
GitHub - increments/qiita-markdown: Qiita-specified markdown processor.

イメージ

内容欄に記述後、プレビューボタンを押すとwindowがプレビュー画面が確認できます。 f:id:Kaorina:20161028142058p:plain

方法はこちら

previewページ用のルーティングを追加

今回、質問投稿用の画面（questions）以下に実装する
config/routes.rb

resources :questions do
  post :preview, on: :collection
end

controllerにpreviewアクションを追加

app/views/controllers/questions_controller.rb

  def preview
    markdown = qiita_markdown(params[:text])
    render text: markdown
  end

private

  def qiita_markdown(markdown)
    processor = Qiita::Markdown::Processor.new
    processor.call(markdown)[:output].to_s.html_safe
  end

viewの編集

app/views/questions/new.html.erb app/views/questions/edit.html.erb ともに同じパーシャルを呼び出し

<%= render 'form' %>

app/views/questions/_form.html.erb

<%= form_for(@question) do |f| %>
--- 中略 ---
  <div>
    <%= f.text_field :title, class: "form-control", placeholder: "タイトル" %>
  </div>

  <div>
    <%= f.text_area :body, class: "form-control", placeholder: "内容", row: 10, required: 'required' %>
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" id="preview_button">内容欄プレビュー</button>
  </div>
  
  <%= render 'preview_window' %>

モーダルウィンドウ用のviewを作成

app/views/questions/_preview_window.html.erb

<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">内容プレビュー</h4>
      </div>
      <div class="modal-result" id="modal-result">
      </div>
    </div>
  </div>
</div>

previewボタンが押下された時に発火するAjaxを作成

app/assets/javascripts/preview.coffee

$ ->
  update_preview = (text) ->
    $.ajax
      url: '/questions/preview'
      type: 'POST'
      data: {text: text}
      success: (data) ->
        $('#modal-result').html(data)
        return
      error: (xhr, status, err) ->
        $('#modal-result').html 'エラーが発生しました ' + err
        return

  $('#preview_button').click ->
    update_preview($('#question_body').val())
    return

下記を参考にさせていただきたました。
こちらはプレビューWindowでなく、同じページ内にライブプレビューを実装されています。
ありがとうございました :)

GitHub - katoy/qiita_markdown_example: makedown のライブプレビューのサンプル

Kaorina’s diary

Ruby on Railsとかとか