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

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

ただいまの
回答率

88.35%

teratailの様なマークダウン形式でかける機能をrailsで実装したい!

受付中

回答 2

投稿 編集

  • 評価
  • クリップ 4
  • VIEW 2,769

kinreo

score 14

前提・実現したいこと

teratail
teratailの様なマークダウン形式をRailsで作りたいです。
・画像挿入できる(複数)
・プレビュー画面がある

更に下書きができる様な機能を追加したいと思っています。

試したこと

画像をuploadすることに関してはpaperclipやcarrywaveで実装してみましたが、その後どうするの?状態です。。。。。

プレビュー画面はjsが必要らしく後々でもいいかなーと思っています。まずはマークダウン形式で画像が挿入できればいいなと思っています。
アイディアや方法があれば教えて欲しいです。宜しくお願いします。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • matobaa

    2016/05/30 18:11 編集

    `

    キャンセル

回答 2

0

ここに自分のサイトのurlを貼り付けるのはお行儀が悪いのは承知ですが、
あまりにもそのままな質問が来ましたので貼っつけてけます。(*マークはすべて削除してください)

https://cheat-paper**.net/demos/**emacs_markdown_editor

Emacsの様に動作するエディタ(rails製)です。
デモページなので、下に使い方が書いてあります。

ブログ形式のサイトですので、ブログ記事を作成するときに使用しています。

画像の挿入に関して。

普段はモーダルを使い実装しています。
画像の挿入ボタンを押した際にモーダルを使い、画像のリストを表示&クリックしたらプレビュー&挿入ボタンクリックで画像のurlを記述したhtmlを挿入しています。

エディタ部分に関しては
codemirrerというgemを利用しています。
大変便利です。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/05/30 21:44

    返信ありがとうございます。
    すごいです!こんなエディター使ってブログ書いてるんですね。
    どうすればrealizerSさんのエディタを自分のに組み込むか全然わかりませんが、いつか自分で作ってみたいです。

    モーダルという言葉初めて聞きました。勉強になります!

    キャンセル

  • 2016/05/30 22:10

    すみません。

    肝心の実装がかけていませんでしたね。

    エディタ部分のみなら本当に単純です。

    ほとんどCodeMirrorというgemを利用していますから。

    CodeMirrorのURL
    https://codemirror.net/

    CodeMirrorをRailsで使うにはCodeMirror-Railsというgemを使うのが手っ取り早いです

    Github
    https://github.com/fixlr/codemirror-rails

    上記のURLで基本の設定が説明されています。

    CodeMirrorはマークダウンだけでなく様々な言語に対応したエディタを作れるすぐれものです。

    基本的な設定も上記を参照すれば解ると思います。

    さて、モーダルを使った画像を挿入する方法ですが、様々ありますが、個人的に楽だと思うのは、


    ```html
    <div id='modal' class='hidden' style='position:fixed; top:0; left:0; right:0; bottom:0;'>
    中身
    <div>
    ```

    みたいにhidden要素(モーダル)を作っておいて、

    1. (画像を挿入する)ボタンクリックと同時にajaxで画像(のurl)を取得し、
    2. モーダルの中身を作り
    3. モーダルを表示状態する(モーダルにはモーダルを閉じる、つまり、非表示にするボタンが必要)

    でモーダルの画像をクリックしたら

    1. (必要なら)プレビュー
    2. 何らかの確定ボタンで、エディタにコードを挿入
    3. モーダルを閉じる

    という流れで実装できるかと思います。

    分かりづらかったらすみません。

    キャンセル

  • 2016/05/30 22:14 編集

    コードの表示に関して書くのを忘れていました。

    コードの表示はSyntaxHighlighterというライブラリを使っています。

    GitHubでも使われている有名なライブラリで、Gemも存在するので、簡単に使えます。

    GitHub
    https://github.com/ophilbert/syntax-highlighter-rails

    これも説明を見れば簡単に分かるかと思います。

    最後に。
    エディタのコードをMarkdown記法に変換する必要があります。

    Railsなら、RedCarpetというGemを使うのが楽かと思います。

    GitHub
    https://github.com/vmg/redcarpet

    RedCarpetを使ったMarkdownのヘルパに関しては多分こんな感じで実装できます。
    (SyntaxHighlighterを使うことを仮定しています。)

    module MarkdownHelper

    class MarkdownRenderer < Redcarpet::Render::HTML

    def block_code(code, language)
    if language && pos = language.index(':')
    "\n<pre class='brush:#{language[0...pos]}' title='#{language[pos+1..-1]}'>\n#{code}\n</pre>\n"
    elsif language
    "\n<pre class='brush:#{language}'>\n#{code}\n</pre>\n"
    else
    "\n<pre><code>#{code}</code></pre>\n"
    end
    end

    end

    def markdown(text)
    unless @markdown
    renderer = MarkdownRenderer.new(hard_wrap: true)
    @markdown = Redcarpet::Markdown.new(renderer,
    no_intra_emphasis: true,
    fenced_code_blocks: true
    )
    end

    @markdown.render(text).html_safe
    end
    end

    キャンセル

0

Rails に Markdown preview 機能を付けたものを作ったことがあります。
https://github.com/katoy/qiita_markdown_example

ここでは、
Text Area を編集する度に ajax 呼び出して、 
html 変換した結果を得て、
それを表示する
という方法をとっています。

シンタックスハイライトの例は次のページが参考になるとおもいます。

teratail の次のページも参考になるかもしれません。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

  • ただいまの回答率 88.35%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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