62

バックグラウンド

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

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

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

私のプロジェクトの要件

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

私が見た編集者

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

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

5 に答える 5

27

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

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

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

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

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

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

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

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

于 2010-05-28T23:11:21.483 に答える
7

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

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

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

于 2014-02-20T17:26:56.853 に答える
5

ライブプレビュー部分の場合、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要素にダンプします。

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

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

于 2010-05-21T18:21:28.067 に答える
1

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

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

于 2014-04-18T16:35:57.460 に答える
0

Standard 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);
于 2014-09-04T21:52:32.040 に答える