Nom du projet : Editor.md -- éditeur Markdown

Adresse open source GitHub : https://github.com/pandao/editor.md

Adresse de test en ligne : https://pandao.github.io/editor.md/

Exemple complet : http://editor.md.ipandao.com/examples/html-preview-markdown-to-html.html

Dans le monde actuel d'Internet, Markdown est devenu le langage de balisage préféré des créateurs de contenu, des développeurs et des rédacteurs techniques. Il est largement populaire pour sa syntaxe concise et son format facile à lire.

Editor.md est un éditeur Markdown en ligne open source et intégrable, construit sur CodeMirror, jQuery et Marked. Son apparition offre aux utilisateurs une expérience d'édition Markdown plus pratique et plus riche en fonctionnalités.

Editor.md est un éditeur Markdown puissant, flexible et facile à utiliser. Il offre une solution d'édition en ligne efficace aux passionnés et aux professionnels de Markdown.

Editor.md offre de riches fonctionnalités et plugins, permettant aux utilisateurs de le personnaliser selon leurs besoins. Par exemple, les utilisateurs peuvent utiliser des plugins pour éditer des formules mathématiques, dessiner des organigrammes et des diagrammes de séquence, et même mettre en œuvre une édition collaborative multi-utilisateurs.

La page d'accueil fournit de nombreux exemples pour nous permettre d'apprendre et de l'utiliser :

Un exemple simple :

Dessiner un diagramme de séquence :

Editor.md possède les fonctionnalités suivantes :

  • WYSIWYG (ce que vous voyez est ce que vous obtenez): Editor.md propose une interface d'édition intuitive, permettant aux utilisateurs de visualiser en temps réel le rendu du texte Markdown.

  • Hautement personnalisable: Grâce aux options de configuration, les utilisateurs peuvent ajuster l'apparence et le comportement de l'éditeur pour s'adapter à différents scénarios d'utilisation et styles de marque.

  • Prise en charge étendue des plugins: Editor.md prend en charge une variété de plugins, tels que le téléchargement d'images, les emojis, la coloration syntaxique, etc., ce qui étend considérablement les fonctionnalités de l'éditeur.

  • Compatibilité multiplateforme: Que ce soit sur ordinateur de bureau ou sur appareil mobile, Editor.md offre une expérience d'édition fluide.

  • Facile à intégrer: En tant que composant, Editor.md peut être intégré de manière transparente dans des applications ou services web existants sans configuration complexe.

Scénarios d'utilisation d'Editor.md :

  • Blogs et systèmes CMS: Fournir une fonctionnalité d’édition Markdown pour les systèmes de gestion de contenu, permettant aux auteurs de se concentrer sur la création.
  • Forums et communautés: Fournir un éditeur Markdown sur les plateformes de contenu généré par les utilisateurs pour améliorer la qualité des publications.
  • Documentation et bases de connaissances: Fournir un éditeur Markdown pour la documentation technique et les centres d’aide afin de garantir une mise en forme cohérente des documents.
  • Sites web personnels et portfolios: Fournir un éditeur Markdown pour les projets personnels, ce qui facilite la mise à jour et la maintenance rapides.

Installation

Méthode d’installation npm :

npm install editor.md

Méthode d’installation Bower :

bower install editor.md

Créer un éditeur Markdown :

Exemples

<link rel="stylesheet" href="editor.md/css/editormd.min.css" />
<div id="editor">
    <!-- Astuces : Editor.md peut ajouter automatiquement une balise `<textarea>` -->
    <textarea style="display:none;">### Bonjour 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", // définir dynamiquement le texte Markdown
            path : "editor.md/lib/" // Mode de chargement automatique des modules, codemirror, marked... chemin des bibliothèques dépendantes
        });
    });
</script>

Markdown vers HTML :

Exemples

<link rel="stylesheet" href="editormd/css/editormd.preview.css" />
<div id="test-markdown-view">
    <!-- Texte Markdown généré côté serveur -->
    <textarea style="display:none;">### Bonjour le monde !</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### Bonjour le monde !\n## Titre 2", // De plus, vous pouvez définir dynamiquement le texte Markdown
            // htmlDecode : true, // Activer / désactiver l'encodage des balises HTML.
            // htmlDecode : "style,script,iframe", // Remarque : si activé, vous devez filtrer certaines balises HTML dangereuses pour la sécurité du site Web.
        });
    });
</script>