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

Question

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

受付中

回答 2

投稿 2016/05/30 17:35 ・編集 2016/05/30 18:22

評価
クリップ 4
VIEW 2,769

kinreo

score 14

前提・実現したいこと

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

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

試したこと

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

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

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

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

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

クリップを取り消します
良い質問の評価を上げる

以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します

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

評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します

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

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

評価を下げる理由を選択してください
プログラミングに関係のない質問やってほしいことだけを記載した丸投げの質問問題・課題が含まれていない質問意図的に内容が抹消された質問過去に投稿した質問と同じ内容の質問広告と受け取られるような投稿
詳細な説明はこちら

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

この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
- メールアドレスの認証
  メールアドレスの認証
- 質問評価に関するヘルプページの閲覧
  質問評価に関するヘルプページの閲覧

1 件の質問への追記・修正依頼

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

matobaa

2016/05/30 18:11 編集

`

`

キャンセル

回答 2 件

評価が高い順
新着順
古い順

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

Ruby on Rails

score 0 · Answer 1 · 2016-05-30T21:25

0

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

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

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

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

画像の挿入に関して。

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

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

投稿 2016/05/30 21:25

編集 2016/05/30 21:27

回答の評価を上げる

以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
回答の評価を下げる

下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

2016/05/30 21:44

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

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

返信ありがとうございます。すごいです！こんなエディター使ってブログ書いてるんですね。どうすれば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. モーダルを閉じる

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

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

すみません。肝心の実装がかけていませんでしたね。エディタ部分のみなら本当に単純です。ほとんど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

コードの表示に関して書くのを忘れていました。コードの表示は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

キャンセル

score 0 · Answer 2 · 2016-05-30T22:25

0

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

投稿 2016/05/30 22:25

回答の評価を上げる

以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
回答の評価を下げる

下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

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

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

前提・実現したいこと

試したこと

関連した質問

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

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

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

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

前提・実現したいこと

試したこと

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

関連した質問

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

SNSアカウントでログイン

teratailアカウントでログイン