30638


### 前提・実現したいこと

**pagedown-bootstrap-rails** を実装したいです。

### 発生している問題・エラーメッセージ

プレビューが表示されません。

### 該当のソースコード

以下、実装手順とともに該当コードを記します。

【Gemfile】

[code]

    gem 'bootstrap-sass'
    gem 'font-awesome-rails'
    gem 'simple_form'
    gem 'pagedown-bootstrap-rails'
    
[/code]

【markdown_apis.coffee】

[code]

      $ ->
        $('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()
    
[/code]

【application.js】

[code]

    //= require pagedown_bootstrap
    //= require pagedown_init
    
[/code]

【application.css.scss】

[code]

    @import "pagedown_bootstrap";
    
[/code]

【app/inputs/pagedown_input.rb】←手動でつくりました。

[code]

    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
    
[/code]

【app/views/page/index.html.erb】

[code]

    <%= simple_form_for(@micropost) do |f| %>
      <%= f.input :content, as: :pagedown, input_html: { preview: true, rows: 20 } %>
    <% end %>
    
[/code]

※inputの直近のハッシュの値をbodyからcontentに変更。  
※for(@article)をfor(@micropost)に変更。

これを実行するとフォームは表示されるのですが、ビューが表示されないのです。。。

### 補足情報(言語/FW/ツール等のバージョンなど)

じつは上記のgemに以外にもmarkdown系のgemを入れてます。  
これが関係しているのでしょうか？

[code]

    gem 'redcarpet'
    gem 'acts-as-taggable-on'
    gem 'codemirror-rails'
    gem 'syntax-highlighter-rails'
    
[/code]

これに伴いapplication.jsやapplication.cssにいろいろ入れてます。  
【application.css】

[code]

     *= 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
    
[/code]

【application.js】

[code]

    //= 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
    
[/code]

ご教授お願いします！！

マルチポスト  
[teratail](https://teratail.com/questions/56196)


CC BY-SA 3.0
2016-11-22T15:42:54.663
30603
2016-11-24T03:52:15.557
2020-06-17T08:14:45.997
-1
19459
question
javascript ruby-on-rails bootstrap rubygems markdown
pagedown-bootstrap-railsでプレビューが表示されない。


自己解決。

こちらに忠実に従うことで実装できました。  
[pagedown-bootstrap-rails](https://github.com/hughevans/pagedown-bootstrap-
rails)  
おそらくですが、

[code]

    /*= require pagedown_bootstrap */
    
[/code]

この記述箇所に失敗していたので実装できなかったのかと思います。

【application.css】

[code]

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


CC BY-SA 3.0
2016-11-24T03:52:15.557
30638
2016-11-24T03:52:15.557
19459
30603
answer