Éditeur de texte Markdown WYSIWYG intégré

En recherchant un éditeur WYSIWYG simple pour le code Markdown, je ne trouve pas d'interface utilisateur comparable à celle de CkEditor, TinyMCE, etc.

Plus précisément, les éditeurs Markdown "WYSIWYG" qui sont souvent recommandés (tels que des articles comme celui-ci ) ne sont pas des éditeurs WYSIWYG purs dans le sens où les utilisateurs écrivent toujours du Markdown brut ( MarkItUp ) ou vont à l'autre extrême de l'édition en ligne sans contrôles standard ( Hallo ).

J'ai besoin de quelque chose entre les deux.

Je recherche un éditeur Markdown qui ressemble et fonctionne comme une zone de texte CkEditor épurée, et qui accepte et produit Markdown. Il devrait y avoir une barre d'outils avec un ensemble minimum d'options de formatage (B, I, U, listes, ect), et la zone de saisie de texte devrait afficher le Markdown converti, pas le code brut. Il devrait y avoir un bouton Source qui permettra aux utilisateurs de modifier le Markdown brut, mais même cela est facultatif. Ex:

Je comprends la raison de Markdown / wiki, ect - la sécurité qu'il offre. Cela ne me dérange pas d'entrer du code brut comme ici à SE, mais mes utilisateurs ne sont pas des geeks et ne trouvent pas cela agréable. Ils ne veulent pas voir * * * ___ et les espaces mélangés avec leur texte. Ils sont habitués à l'édition de style "Word" et sont les plus productifs dans cet environnement.

Alors - y a-t-il un éditeur WYSIWYG vraiment intégré pour Markdown? J'écris dans un PHP, donc quelque chose que je peux invoquer avec une classe serait parfait.

Mise à jour du 23 septembre 2015

CKEditor a maintenant un addon Markdown qui fait exactement cette chose. Le projet addon est hébergé sur github .

Captures d'écran:

13 avril 2015 Mise à jour
Quelqu'un prétendant développer CKEditor dit que l'apparence de CommonMark change la donne et que nous pourrions éventuellement voir une interface de balisage appropriée pour CKEditor (lire les commentaires pour l'histoire complète).

Mise à jour du 6 février 2015

CKEditor est maintenant livré avec un plugin qui génère (et accepte comme entrée) le BBCode.

Démo: http://ckeditor.com/demo#bbcode

Je faisais des recherches sur ce sujet l'autre jour et je n'ai trouvé aucun éditeur WYSIWYG décent avec une sortie Markdown. En fait, vous devez d'abord créer un éditeur WYSIWG Markdown est un éditeur HTML WYSIWG et il n'y en a que quelques-uns qui sont utilisables sur le marché.

Il y a une chance que vous puissiez créer dataProcessorpour CKEditor qui changera l'éditeur HTML en éditeur Markdown. Nous avons un plugin pour BBCode qui fonctionne comme ça (consultez http://nightly-v4.ckeditor.com/3737/samples/bbcode.html ).

Tout ce que vous avez à faire est d'implémenter cette interface http://nightly-v4.ckeditor.com/ckeditor_api/#!/api/CKEDITOR.dataProcessor . Si vous vérifiez le code du plugin BBCode, vous verrez quelques hacks et astuces, car malheureusement l'architecture actuelle de CKEditor n'est pas (encore) prête à créer un tel processeur de données. Cependant, je pense que si vous ne souhaitez fournir que quelques options de style, vous devriez être en mesure de mettre en œuvre le support Markdown assez rapidement.

SimpleMDE , un nouveau venu, peut être la réponse. Je cherche quelque chose comme ça depuis un mois maintenant. Je suis surpris que cela n'apparaisse pas plus haut dans les résultats de recherche. J'ai dû parcourir une notice sur lepture / éditeur pour trouver ceci.

EDIT 23 septembre 2015

CKEditor a maintenant un addon Markdown qui fait exactement cette chose. Le projet addon est hébergé sur github .

Captures d'écran:

Comme indiqué dans ma mise à jour du 6 février 2015, CKEditor inclut désormais des plugins qui permettent l'entrée et la sortie BBCode.

Une démo est disponible ici: http://ckeditor.com/demo#bbcode

EDIT 13 avril 2015:
Quelqu'un qui prétend développer CKEditor dit que l'apparition de CommonMark change la donne et que nous pourrions éventuellement voir une interface de balisage appropriée pour CKEditor (lire les commentaires pour l'histoire complète).

Pen est un nouvel éditeur WYSIWYG (actif à partir de 2014) qui produit Markdown .
Ce n'est pas parfait - j'ai eu des problèmes pour coller du HTML là-bas - mais cela fonctionne.

Edit: Désolé! Il ne produit pas de Markdown. Walery Strauch a souligné dans les commentaires que les signes de mise en forme Markdown que j'ai vus étaient en fait des règles de pseudo éléments CSS:

Néanmoins, je vais le laisser ici comme une option car certaines personnes ont voté pour cette réponse et cela peut avoir été utile à quelqu'un.

J'ai implémenté un éditeur très simple qui permet de modifier le contenu d'un <textarea>qui contient Markdown de manière WYSIWYG.

J'ai utilisé Hallo . Je ne pense pas que son site Web montre clairement que ce n'est pas lui-même un éditeur Markdown WYSIWYG, mais la démo en forge le chemin.

Hallo permet l'édition WYSIWYG du HTML dans un fichier <div>. J'ai utilisé javascript pour masquer tous les <textarea>blocs qui ont une wysiwygclasse CSS spécifique , en le remplaçant par un <div>et en copiant le contenu du <textarea>dans le <div>. La copie passe par Showdown qui produit du HTML à partir de Markdown.

Une autre routine Javascript réagit à chaque fois que le <div>contenu change. Il copie le contenu dans le (maintenant masqué) <textarea>. Le contenu est exécuté jusqu'au markdown pour passer du HTML au Markdown.

Si le <textarea>est un champ dans un <form>, alors le Markdown modifié sera envoyé au serveur lorsque ce formulaire est soumis.

L'inspiration pour cela vient de l' exemple Hallo Markdown , en particulier le fichier editor.js . J'ai utilisé cela comme base pour mon propre script avec hallo.js , showdown.js et to-markdown.js .

Mon script, wysiwyg.js est un dérivé de editor.js de l' exemple Hallo Markdown . Quelques points à noter:

• J'utilise ceci dans une application Rails (pas que ce soit important)
• Il fonctionne sur readyet aussi sur page:load, ce dernier car Rails utilise Turbolinks
• Il fonctionne ajaxCompletecar j'utilise Ajax pour les rapports d'erreur de formulaire
• Il existe d'autres dépendances: JQueryUI et Rangy (les utilisateurs de Rails peuvent profiter des gemmes jquery-ui-rails et rangy-rails ).
• Aussi la police Impressionnant est utilisé pour les icônes de la barre d'outils. La version de hallo.jsutilisée par la démo est obsolète (elle utilise une ancienne version de Font Awesome ) - utilisez plutôt hallo.js de GitHub .

Il vous suffit d'ajouter du CSS class='wysiwyg'à n'importe quel <textarea>pour activer WYSIWYG dessus. Le <textarea>devrait contenir du texte au format Markdown.

Je m'attendrais à ce que wysiwyg.js puisse être facilement adapté pour utiliser un autre éditeur si vous n'aimez pas Hallo tant qu'il fonctionne sur le HTML dans un fichier<div> . Il y en a pas mal de choix, mais tous ne sont pas aussi légers que Hallo .

Un travail souriant que j'ai trouvé est markdown-html-form . Il utilise le même Showdown et to-markdown .

Je recherche également un éditeur de démarques décrit en haut de ce fil

Avez-vous vu des "outils de démarque": http://md-wysiwyg.sourceforge.net/

Démo: http://md-wysiwyg.sourceforge.net/cgi-bin/cgi_wysiwyg_test.py/

Cela semble assez proche de ce que nous recherchons, cela fait un travail raisonnable de prendre votre texte enrichi WYSIWYG et de produire des démarques. Cependant, il a échoué sur une exception d'encodage lorsque j'ai collé du texte enrichi à partir d'un document google.