前提・実現したいこと
pagedown-bootstrap-railsを実装したいです。
発生している問題・エラーメッセージ
プレビューが表示されません。
該当のソースコード
以下、実装手順とともに該当コードを記します。
【Gemfile】
gem 'bootstrap-sass'
gem 'font-awesome-rails'
gem 'simple_form'
gem 'pagedown-bootstrap-rails'
【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()
【application.js】
//= require pagedown_bootstrap
//= require pagedown_init
【application.css.scss】
@import "pagedown_bootstrap";
【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
【app/views/page/index.html.erb】
<%= simple_form_for(@micropost) do |f| %>
<%= f.input :content, as: :pagedown, input_html: { preview: true, rows: 20 } %>
<% end %>
※inputの直近のハッシュの値をbodyからcontentに変更。
※for(@article)をfor(@micropost)に変更。
これを実行するとフォームは表示されるのですが、ビューが表示されないのです。。。
補足情報(言語/FW/ツール等のバージョンなど)
じつは上記のgemに以外にもmarkdown系のgemを入れてます。
これが関係しているのでしょうか?
gem 'redcarpet'
gem 'acts-as-taggable-on'
gem 'codemirror-rails'
gem 'syntax-highlighter-rails'
これに伴いapplication.jsやapplication.cssにいろいろ入れてます。
【application.css】
*= require bootstrap-tagsinput
*= require codemirror
*= require codemirror/themes/cobalt
*= require codemirror/addons/hint/show-hint
*= require codemirror/addons/dialog/dialog
*= require syntax-highlighter-rails/shCore
*= require syntax-highlighter-rails/shThemeRDark
【application.js】
//= require codemirror
//= require codemirror/modes/markdown
//= require codemirror/modes/gfm
//= require codemirror/modes/xml
//= require codemirror/modes/htmlmixed
//= require codemirror/modes/htmlembedded
//= require codemirror/modes/css
//= require codemirror/modes/ruby
//= require codemirror/modes/javascript
//= require codemirror/modes/perl
//= require codemirror/modes/php
//= require codemirror/modes/scheme
//= require codemirror/modes/shell
//= require codemirror/modes/python
//= require codemirror/modes/clike
//= require codemirror/modes/pascal
//= require codemirror/modes/sql
//= require codemirror/modes/sass
//= require codemirror/modes/gas
//= require codemirror/addons/mode/overlay
//= require codemirror/addons/hint/show-hint
//= require codemirror/addons/hint/xml-hint
//= require codemirror/addons/hint/html-hint
//= require codemirror/addons/search/search
//= require codemirror/addons/search/searchcursor
//= require codemirror/addons/search/jump-to-line
//= require codemirror/addons/search/match-highlighter
//= require codemirror/addons/dialog/dialog
//= require codemirror/keymaps/emacs
//= require syntax-highlighter-rails/shCore
//= require syntax-highlighter-rails/shBrushPlain
//= require syntax-highlighter-rails/shBrushRuby
//= require syntax-highlighter-rails/shBrushJScript
//= require syntax-highlighter-rails/shBrushJava
//= require syntax-highlighter-rails/shBrushXml
//= require syntax-highlighter-rails/shBrushCss
//= require syntax-highlighter-rails/shBrushPhp
//= require syntax-highlighter-rails/shBrushBash
//= require pagedown_bootstrap
//= require pagedown_init
ご教授お願いします!!
マルチポスト
スタックオーバーフロー
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
check解決した方法
+1
こちらに忠実に従うことで実装できました。
pagedown-bootstrap-rails
おそらくですが、
/*= require pagedown_bootstrap */
この記述箇所に失敗していたので実装できなかったのかと思います。
【application.css】
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any styles
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new
* file per style scope.
*
*= require_tree .
*= require_self
*= require dropzone/basic
*= require dropzone/dropzone
*= require bootstrap-tagsinput
*= require pagedown_bootstrap *←以前はここだった。
*/
/*= require pagedown_bootstrap */←ここに記述
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう!
- ただいまの回答率 88.34%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる