106

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

具体的には、頻繁に推奨されるMarkdown "WYSIWYG"エディター（このような投稿など）は、ユーザーが未加工のMarkdown（ MarkItUp）を作成するか、インライン編集を行わずにインライン編集を行うという意味で、純粋なWYSIWYGエディターではありません。標準コントロール（Hallo）。

間に何かが必要です。

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

ここに画像の説明を入力してください

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

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

2015年9月23日更新

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

スクリーンショット：

マークダウンWYSIWYG

マークダウンソース

2015年4月13日更新
CKEditorの開発を公言している人が、CommonMarkの外観はゲームチェンジャーであり、CKEditorの適切なマークアップインターフェイスを見ることができると言っています（全文のコメントを読んでください）。

2015年2月6日更新

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

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

4

7 に答える 7

31

SimpleMDE、新参者が答えかもしれません。私はこのようなものを1か月間探していました。これが検索結果の上位に表示されないことに驚いています。これを見つけるには、 lepture/editorに関する通知を確認する必要がありました。

ここに画像の説明を入力してください

于 2015-09-12T06:53:56.693 に答える
15

先日、このテーマについて調査していましたが、Markdown出力を備えた適切なWYSIWYGエディターは見つかりませんでした。実際、最初にWYSIWGマークダウンエディターを作成する必要があります。これは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を実装することです。BBCodeプラグインのコードをチェックすると、いくつかのハックとトリックが表示されます。残念ながら、現在のCKEditorのアーキテクチャは、そのようなデータプロセッサを作成する準備ができていないためです。ただし、少数のスタイリングオプションのみを提供したい場合は、Markdownサポートを非常に迅速に実装できるはずです。

于 2012-11-05T20:42:18.067 に答える
10

2015年9月23日編集

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

スクリーンショット：

マークダウンWYSIWYG

マークダウンソース

2015年2月6日の更新で投稿されたように、CKEditorにはBBCodeの入力と出力を可能にするプラグインが含まれるようになりました。

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

編集2015年4月13日：
CKEditorの開発を公言している人は、CommonMarkの外観はゲームチェンジャーであり、CKEditorの適切なマークアップインターフェイスを見ることができる可能性があると述べています（全文のコメントを読んでください）。

于 2015-02-06T19:08:53.243 に答える
8

Penは、 Markdownを出力する新しい（2014年現在アクティブな）WYSIWYGエディターです。
完璧ではありません—HTMLの貼り付けに問題がありました—しかし、それは機能します。

編集：ごめんなさい！Markdownは出力されません。 Walery Strauchはコメントの中で、私が見たMarkdownフォーマット記号は実際にはCSS疑似要素ルールであると指摘しました。

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

于 2014-03-10T19:08:42.980 に答える
4

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

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

Halloを使用すると、内のHTMLをWYSIWYGで編集できます<div>。javascriptを使用<textarea>して、特定のCSSクラスを持つブロックを非表示wysiwygにし、それをaに置き換え<div>、の内容をにコピーし<textarea>ました<div>。コピーは、MarkdownからHTMLを生成するShowdownを介して実行されます。

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

<textarea>が>のフィールドである場合<form、そのフォームが送信されると、編集されたマークダウンがサーバーに送信されます。

このインスピレーションは、Hallo Markdown Example、特にeditor.jsファイルから得られます。これを、 hallo.js、showdown.js、to- markdown.jsとともに自分のスクリプトのベースとして使用しました。

私のスクリプトwysiwyg.jsは、HalloMarkdownExampleのeditor.jsから派生したものです。注意すべきいくつかのポイント：

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

class='wysiwyg'CSSを追加するだけで<textarea>、WYSIWYGを有効にできます。<textarea>Markdown形式のテキストを含める必要があります。

Halloが気に入らない場合は、.のHTMLで機能する限り、wysiwyg.jsを別のエディターを使用するように簡単に適合させることができると思います。選択できるものはかなりありますが、すべてがHalloほど軽量であるとは限りません。<div>

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

于 2015-11-07T16:26:03.653 に答える
3

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

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

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

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

于 2013-07-02T16:43:21.763 に答える
0

現在非常に人気があり、アクティブで無料のようですが、まだ言及されていない2つを見つけました。

1つ目はToastUIEditorです。両方のモード（WYSIWYGとraw）をサポートします。公式のreactラッパーとvuejsラッパーがあります。

トーストUI

2つ目はProseMirrorで、これは「Web上でリッチテキストエディタを構築するためのツールキット」と呼ばれ、非常に柔軟で広範囲にわたるようです。また、両方のモードをサポートしています。

確かな非公式のreact /vue/angularラッパーも見つかると確信しています。

ProseMirror

于 2021-08-05T23:41:45.567 に答える