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

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

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

RubyGemsはRubyによるプログラミングのためのパッケージマネジメントツールです。ユーザはこれを使用することで、Rubyライブラリのダウンロードやアップデートや、依存関係の自動解決が可能になります。

JavaScript

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

Ruby on Rails 4

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

Markdown

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

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Q&A

解決済

1回答

2427閲覧

pagedown-bootstrap-railsでプレビューが表示されない。

s.k

総合スコア423

RubyGems

RubyGemsはRubyによるプログラミングのためのパッケージマネジメントツールです。ユーザはこれを使用することで、Rubyライブラリのダウンロードやアップデートや、依存関係の自動解決が可能になります。

JavaScript

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

Ruby on Rails 4

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

Markdown

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

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

0グッド

0クリップ

投稿2016/11/22 15:36

編集2016/11/23 04:01

###前提・実現したいこと
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

ご教授お願いします!!

マルチポスト
スタックオーバーフロー

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

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

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

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

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

guest

回答1

0

自己解決

こちらに忠実に従うことで実装できました。
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 */←ここに記述

投稿2016/11/24 03:50

s.k

総合スコア423

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問