Projektname: Editor.md -- Markdown-Editor

GitHub-Open-Source-Adresse: https://github.com/pandao/editor.md

Online-Testadresse: https://pandao.github.io/editor.md/

Vollständiges Beispiel: http://editor.md.ipandao.com/examples/html-preview-markdown-to-html.html

In der heutigen Internetwelt ist Markdown zur bevorzugten Auszeichnungssprache für Content-Ersteller, Entwickler und technische Redakteure geworden. Es ist wegen seiner prägnanten Syntax und seines leicht lesbaren Formats weit verbreitet.

Editor.md ist ein quelloffener, einbettbarer Markdown-Online-Editor, der auf CodeMirror, jQuery und Marked basiert. Seine Einführung bietet Nutzern eine bequemere und funktionsreichere Markdown-Bearbeitungserfahrung.

Editor.md ist ein leistungsstarker, flexibler und einfach zu bedienender Markdown-Editor. Er bietet Markdown-Enthusiasten und Fachleuten eine effiziente Online-Bearbeitungslösung.

Editor.md bietet umfangreiche Funktionen und Plugins, mit denen Nutzer es an ihre Bedürfnisse anpassen können. Zum Beispiel können Nutzer Plugins verwenden, um mathematische Formeln zu bearbeiten, Flussdiagramme und Sequenzdiagramme zu zeichnen und sogar kollaborative Bearbeitung mit mehreren Nutzern umzusetzen.

Die Startseite bietet uns viele Beispiele zum Lernen und Nutzen:

Ein einfaches Beispiel:

Ein Sequenzdiagramm zeichnen:

Editor.md hat die folgenden Funktionen:

  • WYSIWYG (What You See Is What You Get): Editor.md bietet eine intuitive Bearbeitungsoberfläche, mit der Nutzer die gerenderte Darstellung des Markdown-Textes in Echtzeit sehen können.

  • Hochgradig anpassbar: Durch Konfigurationsoptionen können Nutzer das Aussehen und Verhalten des Editors an verschiedene Anwendungsszenarien und Markenstile anpassen.

  • Umfangreiche Plugin-Unterstützung: Editor.md unterstützt eine Vielzahl von Plugins, wie Bild-Upload, Emojis, Code-Hervorhebung usw., was die Funktionalität des Editors erheblich erweitert.

  • Plattformübergreifende Kompatibilität: Ob auf Desktop- oder Mobilgeräten, Editor.md bietet ein reibungsloses Bearbeitungserlebnis.

  • Einfache Integration: Als Komponente kann Editor.md nahtlos in bestehende Webanwendungen oder Dienste integriert werden, ohne komplexe Konfiguration.

Einsatzszenarien für Editor.md:

  • Blogs und CMS-Systeme: Bieten Sie Markdown-Bearbeitungsfunktionalität für Content-Management-Systeme, damit sich Autoren auf die Erstellung konzentrieren können.
  • Foren und Communities: Stellen Sie einen Markdown-Editor auf Plattformen mit benutzergenerierten Inhalten bereit, um die Qualität von Beiträgen zu verbessern.
  • Dokumentation und Wissensdatenbanken: Stellen Sie einen Markdown-Editor für technische Dokumentation und Hilfe-Center bereit, um eine konsistente Dokumentformatierung sicherzustellen.
  • Persönliche Websites und Portfolios: Stellen Sie einen Markdown-Editor für persönliche Projekte bereit, der schnelle Aktualisierungen und Wartung erleichtert.

Installation

npm-Installationsmethode:

npm install editor.md

Bower-Installationsmethode:

bower install editor.md

Einen Markdown-Editor erstellen:

Beispiele

<link rel="stylesheet" href="editor.md/css/editormd.min.css" />
<div id="editor">
    <!-- Tipps: Editor.md kann automatisch ein `<textarea>`-Tag anhängen -->
    <textarea style="display:none;">### Hallo 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", // Markdown-Text dynamisch festlegen
            path : "editor.md/lib/" // Autoload-Module-Modus, codemirror, marked... Pfad abhängiger Bibliotheken
        });
    });
</script>

Markdown zu HTML:

Beispiele

<link rel="stylesheet" href="editormd/css/editormd.preview.css" />
<div id="test-markdown-view">
    <!-- Markdown-Text serverseitig ausgeben -->
    <textarea style="display:none;">### Hallo Welt!</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### Hallo Welt!\n## Überschrift 2", // Außerdem können Sie den Markdown-Text dynamisch festlegen
            // htmlDecode : true, // Aktivieren / Deaktivieren der HTML-Tag-Kodierung.
            // htmlDecode : "style,script,iframe", // Hinweis: Wenn aktiviert, sollten Sie einige gefährliche HTML-Tags aus Sicherheitsgründen für die Website filtern.
        });
    });
</script>