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

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

ただいまの
回答率

91.46%

  • JavaScript

    10901questions

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

  • Ruby on Rails 4

    2117questions

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

  • Bootstrap

    657questions

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

  • RubyGems

    238questions

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

  • Markdown

    54questions

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

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

解決済

回答 1

投稿 2016/11/23 00:36 ・編集 2016/11/23 13:01

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

s.k

score 241

前提・実現したいこと

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ページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

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 */←ここに記述

投稿 2016/11/24 12:50

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

ただいまの回答率

91.46%

関連した質問

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

  • JavaScript

    10901questions

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

  • Ruby on Rails 4

    2117questions

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

  • Bootstrap

    657questions

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

  • RubyGems

    238questions

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

  • Markdown

    54questions

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