プロジェクト名: Editor.md -- Markdownエディター

GitHub オープンソースアドレス： https://github.com/pandao/editor.md

オンラインテストアドレス： https://pandao.github.io/editor.md/

完全な実例： http://editor.md.ipandao.com/examples/html-preview-markdown-to-html.html

現在のインターネットの世界では、Markdownはコンテンツ制作者、開発者、技術ライターにとって第一の選択肢となるマークアップ言語となっています。そのシンプルな構文と読みやすい形式で広く人気を集めています。

Editor.mdは、オープンソースで埋め込み可能なMarkdownオンラインエディターであり、CodeMirror、jQuery、Markedに基づいて構築されています。その登場により、ユーザーはより便利で機能豊富なMarkdown編集体験を得ることができます。

Editor.mdは、強力で柔軟性があり、使いやすいMarkdownエディターです。Markdown愛好家や専門家に効率的なオンライン編集ソリューションを提供します。

Editor.mdは豊富な機能とプラグインを提供しており、ユーザーは自分のニーズに応じてカスタマイズできます。例えば、プラグインを使用して数式の編集、フローチャートやシーケンス図の作成、さらには複数人での共同編集などの機能を実現できます。

ホームページには多くの実例が用意されており、学習に役立ちます：

簡単な実例：

シーケンス図を描く：

Editor.mdには以下の特徴があります：

  • ウィジウィグ（WYSIWYG）：Editor.mdは直感的な編集インターフェースを提供しており、ユーザーはエディター内でMarkdownテキストのレンダリング結果をリアルタイムに確認できます。

  • 高度なカスタマイズ性：設定オプションを通じて、ユーザーはエディターの外観と動作を調整し、さまざまな使用シーンやブランドスタイルに適合させることができます。

  • 豊富なプラグインサポート：Editor.mdは、画像アップロード、絵文字、コードハイライトなど、さまざまなプラグインをサポートしており、エディターの機能を大幅に拡張します。

  • クロスプラットフォーム互換性：デスクトップでもモバイルデバイスでも、Editor.mdはスムーズな編集体験を提供できます。

  • 統合が容易：コンポーネントとして、Editor.mdは複雑な設定なしで既存のWebアプリケーションやサービスにシームレスに統合できます。

Editor.mdの使用シーン：

  • ブログとCMSシステム：コンテンツ管理システムにMarkdown編集機能を提供し、著者が創作に集中できるようにします。
  • フォーラムとコミュニティ：ユーザー生成コンテンツのプラットフォームにMarkdownエディターを提供し、投稿の質を向上させます。
  • ドキュメントとナレッジベース：技術ドキュメントやヘルプセンターにMarkdownエディターを提供し、ドキュメント形式の一貫性を確保します。
  • 個人サイトとポートフォリオ：個人プロジェクトにMarkdownエディターを提供し、迅速な更新とメンテナンスを容易にします。

インストール

npmインストール方法：

npm install editor.md

Bowerインストール方法：

bower install editor.md

Markdownエディターを作成：

実例

<link rel="stylesheet" href="editor.md/css/editormd.min.css" />
<div id="editor">
    <!-- Tips: Editor.md can auto append a `<textarea>` tag -->
    <textarea style="display:none;">### Hello Editor.md !</textarea>
</div>
<script src="jquery.min.js"></script>
<script src="editor.md/editormd.min.js"></script>
<script type="text/javascript">
    $(function() {
        var editor = editormd("editor", {
            // width: "100%",
            // height: "100%",
            // markdown: "xxxx",     // dynamic set Markdown text
            path : "editor.md/lib/"  // Autoload modules mode, codemirror, marked... dependents libs path
        });
    });
</script>

MarkdownをHTMLに変換：

実例

<link rel="stylesheet" href="editormd/css/editormd.preview.css" />
<div id="test-markdown-view">
    <!-- Server-side output Markdown text -->
    <textarea style="display:none;">### Hello world!</textarea>            
</div>
<script src="jquery.min.js"></script>
<script src="editormd/editormd.js"></script>
<script src="editormd/lib/marked.min.js"></script>
<script src="editormd/lib/prettify.min.js"></script>
<script type="text/javascript">
    $(function() {
            var testView = editormd.markdownToHTML("test-markdown-view", {
            // markdown : "[TOC]\n### Hello world!\n## Heading 2", // Also, you can dynamic set Markdown text
            // htmlDecode : true,  // Enable / disable HTML tag encode.
            // htmlDecode : "style,script,iframe",  // Note: If enabled, you should filter some dangerous HTML tags for website security.
        });
    });
</script>