現在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を使用した方がいいとうご意見などもございましたら教えて頂けると嬉しいです。
よろしくお願いします。
あなたの回答
tips
プレビュー