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

Question

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

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

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

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

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

Comments

[matobaa]

`

Answer 1

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

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

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

• RailsのMarkdownをSyntax Highlightに対応させる http://post.simplie.jp/posts/3

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

• https://teratail.com/questions/1961

Answer 2

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

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

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

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

画像の挿入に関して。

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

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

Comments

[kinreo]

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

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

[realizerS]

すみません。

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

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

ほとんど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. モーダルを閉じる

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

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

[realizerS]

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

コードの表示は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