Éditeur de texte Markdown WYSIWYG intégré

101

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:

entrez la description de l'image ici

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:

markdown WYSIWYG

source de démarque


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

un codeur
la source
Ahola Editor, comme suggéré dans cette réponse à la question SO à laquelle vous créez un lien, est un éditeur HTML5 WYSIWYG qui semble faire exactement ce que vous recherchez. Il a même un soupçon du ruban Office. Y a-t-il une raison pour laquelle vous avez réduit cela?
Chris
1
J'ai bien peur de ne pas vraiment comprendre votre dernier commentaire. Ahola est "edit-in-place", comme tous les éditeurs WYSIWYG. La zone d'édition Aholda est juste un divet la barre d'outils en est une autre div, ce pourraient être les seules choses sur la page. La solution Ahola répond à vos exigences pour un "ensemble minimum d'options de formatage (B, I, U, listes, ect), et la zone de saisie de texte doit afficher le Markdown converti, pas le code brut." Pouvez-vous expliquer plus clairement pourquoi ce n'est pas une solution que vous envisagerez.
Chris
1
Markdown remplace tous ces éditeurs WYSIWYG par lui-même. Pourquoi auriez-vous besoin de sortir le markdown?
Pol
4
@Pol: Parce qu'il est sûr de stocker et d'afficher plus tard, par opposition au HTML?
Dan Abramov
1
Je ne reçois pas non plus cette question. Soit vous utilisez Markdown pour générer du HTML, soit vous utilisez un éditeur WYSIWYG pour générer du HTML. Pourquoi voudriez-vous utiliser un éditeur WYSIWYG pour générer Markdown? Si c'est vraiment ce que vous voulez, vous pouvez toujours utiliser CKeditor et transformer le HTML en Markdown.
mb21 le

Réponses:

13

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.

Reinmar
la source
30

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.

entrez la description de l'image ici

HNL
la source
1
Wow, merci de partager cela - c'est EXACTEMENT ce que je cherchais. Impressionnant!
Jared White
1
Merci HNL, même chose ici.
Melvin
4
Ce n'est pas le vrai WYSIWYG cependant. Il mélange le démarque dans la fenêtre de l'éditeur. Ce qui est recherché dans cette question est un éditeur qui montre à la fois la vue finie et la source dans des vues séparées (avec un bouton «source» sur la barre d'outils, pour l'agitation).
un codeur le
9

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:

markdown WYSIWYG

source de démarque


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).

un codeur
la source
"Est-ce que c'est exactement ça?" Selon les courants de l'add-on, ckeditor produit toujours du HTML et non Markdown avec cet add-on.
user764754
8

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.

Dan Abramov
la source
La démo du stylet est éditée sur place, pas ce qui intéressait l'OP (moi). Pas le temps de l'installer cette seconde. Existe-t-il une option de zone de texte traditionnelle?
un codeur
@Acoder: Mon mauvais! Je n'avais pas réalisé que vous vouliez une barre d'outils fixe. Quel est le problème avec Halo ? Il a maintenant une barre d'outils ..
Dan Abramov
2
C'est toujours la mise en page css dans cette capture d'écran. Je voudrais récupérer les données de démarque (jetez un œil sur ma capture d'écran i.imgur.com/fM4jFl2.png )
Walery Strauch
1
@WaleryStrauch Wow, j'étais vraiment stupide. Je n'avais pas réalisé que ce n'était pas vraiment la sortie. Désolée de vous avoir fait perdre votre temps! Je mettrai à jour la réponse.
Dan Abramov
3
..il semble maintenant avoir au moins un support bêta pour la sortie de Markdown.
pjz le
4

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 .

starfry
la source
Hé @starfry, j'ai essayé de reproduire ce que vous décrivez ci-dessus en utilisant votre wysiwyg.js, mais je n'ai rencontré aucun grand succès. Vous vous demandez si vous avez également un HTML d'accompagnement caché dans l'essentiel quelque part? Liste de versions stable des dépendances, etc.? Merci!
Jameson
1
@Jameson J'ai ajouté quelques notes à mon essence . J'espère qu'ils aident! N'hésitez pas à ajouter un commentaire à l'essentiel si vous avez des questions.
starfry
3

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.

robertjd
la source
Le code source de celui-ci montre le HTML et non le démarquage.
un codeur