統合Markdown WYSIWYGテキストエディター

Markdownコード用の簡単なWYSIWYGエディターを探しているとき、CkEditor、TinyMCEなどのUIに匹敵するUIが見つかりません。

具体的には、よく推奨されるMarkdown "WYSIWYG"エディター（このような投稿など）は、ユーザーがまだ生のMarkdown（MarkItUp）を書くか、またはインライン編集をせずにインライン編集を行うという他の極端に行くという意味で、純粋なWYSIWYGエディターではありません。標準コントロール（Hallo）。

その間に何かが必要です。

CkEditorのテキストボックスを取り除いたような外観で機能し、Markdownを受け入れて出力するMarkdownエディターを探しています。書式設定オプションの最小セット（B、I、U、リストなど）を備えたツールバーが必要です。テキスト入力領域には、生のコードではなく、変換されたMarkdownが表示されます。ユーザーが生のMarkdownを編集できる[ソース]ボタンがあるはずですが、それもオプションです。例：

Markdown / wikiなどの理由がわかります-それが提供するセキュリティです。ここSEのような生のコードを入力してもかまいませんが、私のユーザーはオタクではなく、これは楽しいものではありません。彼らは* * * ___とテキストが混在するスペースを見たくありません。これらは「Word」スタイルの編集に使用され、その環境で最も生産的です。

それで、Markdownに本当に統合されたWYSIWYGエディタはありますか？私はPHPで書いているので、クラスで呼び出すことができるものは完璧です。

2015年9月23日更新

CKEditorに、これとまったく同じことを行うMarkdown アドオンが追加されました。アドオンプロジェクトはgithubでホストされています。

スクリーンショット：

4月13日は、2015年の更新
CKEditorバージョンを開発するために公言誰かがの外観と言いCommonMarkはゲームチェンジャーであり、我々は、おそらく正しい見ることができましたCKEditorバージョンのマークアップ・インターフェースを（完全な物語のコメントを読んで）。

2015年2月6日更新

CKEditorには、BBCodeを出力する（および入力として受け入れる）プラグインが付属しています。

デモ：http : //ckeditor.com/demo#bbcode

先日、この問題について調査していましたが、Markdown出力を備えた適切なWYSIWYGエディターは見つかりませんでした。実際、最初にWYSIWG Markdownエディターを作成する必要があります。これはWYSIWG HTMLエディターであり、市場で使用できるものはごくわずかです。

dataProcessorHTMLエディターをMarkdownエディターに変更するCKEditor を作成できる可能性があります。このように機能するBBCodeのプラグインがあります（http://nightly-v4.ckeditor.com/3737/samples/bbcode.htmlをチェックしてください）。

あなたがしなければならないのは、このインターフェースhttp://nightly-v4.ckeditor.com/ckeditor_api/#!/api/CKEDITOR.dataProcessorを実装することだけです。残念ながら現在のCKEditorのアーキテクチャはそのようなデータプロセッサを作成する準備ができていない（まだ）ため、BBCodeプラグインのコードをチェックすると、いくつかのハックやトリックが表示されます。ただし、いくつかのスタイルオプションのみを提供する場合は、Markdownサポートをかなり迅速に実装できるはずです。

初心者のSimpleMDEがその答えかもしれません。私はこのようなものを1か月間探し続けました。これが検索結果の上位に表示されないことに驚いています。これを見つけるには、講義/編集者に関する通知を経由する必要がありました。

編集2015年9月23日

CKEditorに、これとまったく同じことを行うMarkdown アドオンが追加されました。アドオンプロジェクトはgithubでホストされています。

スクリーンショット：

2015年2月6日のアップデートで投稿されたように、CKEditorにはBBCodeの入力と出力を可能にするプラグインが含まれています。

デモはこちらから入手できます：http : //ckeditor.com/demo#bbcode

EDIT 2015年4月13日：
CKEditorバージョンを開発するために公言誰かがの外観と言いCommonMarkはゲームチェンジャーであり、我々は、おそらく正しい見ることができましたCKEditorバージョンのマークアップ・インターフェースを（完全な物語のコメントを読んで）。

ペンは、 Markdownを出力する新しい（2014年からアクティブ）WYSIWYGエディターです。
HTMLの貼り付けに問題がありましたが、完璧ではありませんが、動作します。

編集：申し訳ありません！Markdownは出力されません。 Walery Strauchがコメントで指摘したように、私が見たMarkdownのフォーマット記号は、実際にはCSSの疑似要素の規則でした。

それでも、一部の人々がこの回答に賛成し、それが誰かに役立った可能性があるため、オプションとしてここに残しておきます。

<textarea>Markdownを含むのコンテンツをWYSIWYG形式で編集できるようにする非常にシンプルなエディターを実装しました。

ハロを使いました。そのWebサイトが、それ自体がMarkdown WYSIWYGエディターではないことを明らかにしているとは思いませんが、デモはその1つへのパスを偽造しています。

Halloは内のHTMLのWYSIWYG編集を許可します<div>。JavaScriptを使用<textarea>して特定のwysiwygCSSクラスを持つブロックを非表示にし、それをに置き換えて<div>、のコンテンツをにコピーし<textarea>ました<div>。コピーは、MarkdownからHTMLを生成するShowdownを実行します。

別のJavaScriptルーチンは、<div>内容が変更されるたびに反応します。内容を（現在は非表示に）にコピーし<textarea>ます。コンテンツはto-markdownを介して実行され、HTMLからMarkdownに変換されます。

が>の<textarea>フィールドの<form場合、フォームが送信されると、編集されたMarkdownがサーバーに送信されます。

これのインスピレーションは、Hallo Markdown Example、特にeditor.jsファイルに由来しています。それを、hallo.js、showdown.js、およびto- markdown.jsと一緒に自分のスクリプトの基礎として使用しました。

私のスクリプト、wysiwyg.jsは、Hallo Markdown Exampleからのeditor.jsの派生物です。注意すべきいくつかのポイント：

• 私はこれをRailsアプリケーションで使用します（それは重要ではありません）
• RailsはTurbolinksを使用しているため、それは上readyでも実行されpage:loadます
• ajaxCompleteフォームエラーレポートにAjaxを使用しているため、実行されます
• 他にも依存関係があります：JQueryUIとRangy（Railsユーザーはgems jquery-ui-railsとrangy-railsを利用できます）。
• また、ツールバーのアイコンにはFont Awesomeが使用されています。デモでhallo.js使用されているのバージョンは古くなっています（古いバージョンのFont Awesomeを使用しています）。代わりにGitHubのhallo.jsを使用してください。

CSS class='wysiwyg'をany に追加するだけで<textarea>、WYSIWYGを有効にすることができます。<textarea>Markdownのフォーマットされたテキストをconain必要があります。

HalloがのHTMLで動作するのであれば、wysiwyg.jsが別のエディターを使用するように簡単に調整できると思います。いくつかの選択肢がありますが、すべてがHalloほど軽量ではありません。<div>

私が見つけた同様の作品はmarkdown -html-formです。同じShowdownとto-markdownを使用します。

このスレッドの上部に記載されているマークダウンエディターも探しています

「マークダウンツール」を見たことはありますか：http : //md-wysiwyg.sourceforge.net/

デモ：http : //md-wysiwyg.sourceforge.net/cgi-bin/cgi_wysiwyg_test.py/

それは私たちが探しているものにかなり近いようです、それはあなたのWYSIWYGリッチテキストを取り、マークダウンを出力するという合理的な仕事をします。ただし、Googleドキュメントのリッチテキストを貼り付けたときに、エンコードの例外で失敗しました。