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

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

ただいまの
回答率

90.33%

  • Ruby on Rails 4

    2465questions

    Ruby on Rails4はRubyによって書かれたオープンソースのウェブフレームワークです。 Ruby on Railsは「設定より規約」の原則に従っており、効率的に作業を行うために再開発を行う必要をなくしてくれます。

  • Markdown

    83questions

    Markdownは、文書の構造、修飾情報を記述するための軽量マークアップ言語です。

Railsでマークダウン用エディタを導入(pagedown-bootstrap-rails)

受付中

回答 0

投稿

  • 評価
  • クリップ 0
  • VIEW 599

lapi

score 50

現在rails4.2.3でローカル環境で開発中です。
簡単なブログ的な機能にマークダウン用エディタを実装(teratailみたいな感じ)しようと試みております。

そこで今回簡単にrailsに導入できると書かれていたpagedown-bootstrap-railsというgemを使って実装してみました。

ですが、実装がなかなかうまくできず下記の画像のように入力フォームしか生成されません。

![イメージ説明]

実装後の姿としてはこちらの画像のようにしたいと思っています。
イメージ説明

今回実装するために記述したコード類はこちらです。
インストールしたgem

gem 'bootstrap-sass'
gem 'font-awesome-rails'
gem 'simple_form'
gem 'pagedown-bootstrap-rails'


application.css

省略
/*= require pagedown_bootstrap */


application.js

省略
//= require pagedown_bootstrap
//= require pagedown_init


app/inputs/pagedown_input.rb

class PagedownInput < SimpleForm::Inputs::TextInput
  def input(wrapper_options)
    out = "
\n"
    html_options = input_html_options.merge(class: 'wmd-input', id: "wmd-input-#{attribute_name}")
    out << "#{@builder.text_area(attribute_name, merge_options(html_options, wrapper_options)) }"
    if input_html_options[:preview]
      out << "
"
    end
    out.html_safe
  end

  private

  def merge_options(html_opts, wrapper_opts)
    html_opts.merge(wrapper_opts) { |_key, first, second| first + ' ' + second }
  end
end


markdown_apis.coffee

$ ->
    $('textarea.wmd-input').each (i, input) ->
      attr = $(input).attr('id').split('wmd-input')[1]
      converter = new Markdown.Converter()
      Markdown.Extra.init(converter)
      help =
        handler: () ->
          window.open('http://daringfireball.net/projects/markdown/syntax')
          return false
        title: "<%= I18n.t('components.markdown_editor.help', default: 'Markdown Editing Help') %>"
      editor = new Markdown.Editor(converter, attr, help)
      editor.run()


views/words/new.html.erb

<%= simple_form_for(@word) do |f| %>
  <%= f.input :title, as: :pagedown, input_html: { preview: true, rows: 20 } %>
  <br>
  <%= f.submit %>
<% end %>

今回、実装するにあたり参考にしたサイトは
pagedown-bootstrap-rails
railsに導入できるMarkdown用エディタの紹介
この2つのサイトを参考に実装しましたが、どこを修正すればいいのか分からないため、何かアドバイスなどご教授頂けると助かります。

また、マークダウンを導入する場合はもっと違うgemを使用した方がいいとうご意見などもございましたら教えて頂けると嬉しいです。

よろしくお願いします。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

まだ回答がついていません

同じタグがついた質問を見る

  • Ruby on Rails 4

    2465questions

    Ruby on Rails4はRubyによって書かれたオープンソースのウェブフレームワークです。 Ruby on Railsは「設定より規約」の原則に従っており、効率的に作業を行うために再開発を行う必要をなくしてくれます。

  • Markdown

    83questions

    Markdownは、文書の構造、修飾情報を記述するための軽量マークアップ言語です。