web-dev-qa-db-ja.com

どのStackOverflowスタイルのマークダウン（WMD）JavaScriptエディターを使用する必要がありますか？

バックグラウンド

ユーザーが入力したコンテンツを必要とするアプリケーションに取り組んでおり、StackOverflowスタイルのMarkdownエディターを使用することにしました。過去数日間このトピックを調査した後、ベースWMDエディターには多数のフォークがあり、いくつかはいくつかの基本的な機能強化があり、いくつかはStackOverflowのものとは深刻な違いがあることに気付きました。

これがアプリケーションの中心になるので、できる限り最高のコードベースから始めたいと思います。そこにある多くのソリューションのどれが私のニーズに最も適しているかを誰かが推薦できれば幸いです。

以下は、要件に加えて、私がすでに見つけたものです。この質問が、どのバージョンを使用するかを決定するのに役立ち、自分のニーズにさらに適したポートを見つけるのに役立つことを願っています。

私のプロジェクトの要件

  • ライブプレビュー
  • 同じページに複数のエディターがあります（ユーザーは別の編集ボックスを動的に追加できるため、事前に何人かはわかりません）。
  • 追加のボタンで拡張する機能（img URLを追加するだけでなく、画像をアップロードするボタンが欲しい）。
  • 編集ボックスを動的に表示/非表示にする機能（およびプレビューボックスのみを表示する）。
  • 絶対に必要というわけではありませんが、Stack Overflowはよく知られているので、ルックアンドフィールにできるだけ近づけたいと思います。
  • これが重要かどうかはわかりませんが、バックエンドはDjangoで記述されています。

私が見た編集者

これが私が見たコードベースのいくつかです。明らかに、私はそこに別の解決策を逃しているかもしれません。

  • derobins バージョン。私の知る限り、これは公式のStackOverflowバージョンです。 1ページで複数のエディターをサポートしていないようです。
  • jQuery.MarkEdit 。見た目はとても良いですが、スタックオーバーフローバージョンとはかなり異なります。
  • MooWMD 。今のところ勝者のように見えますが、MarkEditよりもアクティブ/ハッキングが少ないように見えるので少し心配です。
  • wmd-new バージョン。よくわかりませんが、あまり使用されていない古いコードベースのように見えます。
  • SocialSiteブランチ 。公用ではないようです。
javascriptdjangoeditormarkdownwmd
62
Edan Maor

結局、既製のエディターをもう少し探した後、 http://github.com/openlibrary/wmd にあるOpenLibraryWMDポートに落ち着きました。

このエディターを選んだ理由

  1. 私の要件のほとんどを満たしています。
  2. StackOverflowのエディターのように見えます。動作の違いがいくつかあります（以下を参照）。
  3. JQueryの上に構築されています（そして MooTools を必要としません。これは、他の深刻な競争相手である mooWMD よりも優れています）。

私は編集ボックスを自分で表示/非表示にする機能を実装することになりました。これはほとんどの部分で非常に簡単であることがわかりました。私はボタンを使ってエディターを拡張していません。ソースをいじくり回す必要があると思いますが、そうは思いません。大したことになるでしょう。

スタックオーバーフローバージョンとの違い

スタックオーバーフローエディタとはいくつかの違いがあります。

  1. 行末に1回入力すると、1つの段落と見なされるのではなく、<br/>が発生します。私はたまたまこの方法を好むので、この変更で大丈夫です。
  2. 番号付きリストは、MicrosoftWordのように自動番号が付けられています。つまり、打つ Enter 「1.最初の項目」を書き込んだ後、「2。」で始まる行が自動的に取得されます。これも私が本当に好きな変更です。

まあ、これが同様のエディターを探している人に役立つことを願っています。エディターをカスタマイズすることになった場合は、独自のブランチを作成します（MITライセンス）の下でライセンスされています）が、今はソースコードをいじることなく逃げています。

27
Edan Maor

さて、この質問（および解決策）はかなり古くなっているので、ここで何か最新のものを載せると思いました。 :)

それは2014年の初めであり、同じ問題に達したとき、私は最終的に PageDown-Bootstrap を使用しました。これは、完全にカスタマイズ可能なスタイルバー（ボタンバー）を備えた、TwitterBootstrapベースのWMDエディターです。

Bootstrap-Markdown と呼ばれる代替手段もあります。これも非常に有望に見えます。

7
Ory Band

ライブプレビュー部分の場合、 Showdown ライブラリは非常に簡単に操作できます（Edanが指摘しているように、コードベースに含まれています）

このようなものを使用します（使用したくない場合はjQueryを使用する必要はありません）

$(document).ready(function(){
    var converter = new Attacklab.showdown.converter();
    function update_description_preview(){
        $('#description-preview').html(converter.makeHtml($("#id_description").val()));
    }
    update_description_preview();

    $("#id_description").keyup(function(){
        update_description_preview();
    });
});

Update_description_preview関数は、コンバーターオブジェクトを使用して#id_description要素のマークダウンを読み取り、それを＃description-preview要素にダンプします。

ここでは、プレビューウィンドウを初期化するように定義された直後に関数を呼び出しています（エディターにテキストがプリロードされていました）

最後のビットは、キーアップイベントに関数を登録することです。

5
Chris Lawlor

古い要件に完全に適合するかどうかはわかりませんが、2014年に利用可能な別のソリューションは、Apache 2.0でライセンスされ、toptenソフトウェアによって作成されたプレビュー付きのオープンソースマークダウンエディターです。

オンラインデモはこちらから入手できます： http://www.toptensoftware.com/markdowndeep/dingus

1
xmojmr

標準 Common Markdown には、マークダウンをhtmlに変換するためのスタンドアロンのjavascriptファイルが含まれています。公式 デモ またはこれ プランカー に示されているように実装は簡単です。

大まかに：

<script src="//jgm.github.io/stmd/js/stmd.js"></script>
...
var reader = new stmd.DocParser();
var writer = new stmd.HtmlRenderer();
...
var parsed = reader.parse("Some **markdown** text");
var result = writer.renderBlock(parsed);
0
Ben Haley