Éditeur de texte intégré de Markdown WYSIWYG
Dans la recherche d'un simple éditeur WYSIWYG pour code Markdown, je ne parviens pas à trouver un comparible de l'INTERFACE utilisateur pour que de CkEditor, TinyMCE, ect.
plus précisément, les éditeurs "WYSIWYG" de Markdown qui sont souvent recommandés (tels que les messages comme ce ) ne sont pas de purs éditeurs WYSIWYG dans le sens où les utilisateurs écrivent encore Markdown brut ( MarkItUp ) ou aller à l'autre extrémité d'avoir l'édition en ligne sans standard les témoins ( Bonjour ).
j'ai besoin de quelque chose entre les deux.
je suis à la recherche d'un éditeur de Markdown qui ressemble et fonctionne comme une boîte de texte CkEditor dépouillée, et qui accepte et affiche 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 d'entrée de texte devrait montrer le Markdown converti, pas le code brut. Il devrait y avoir un bouton Source qui permettra aux utilisateurs de modifier les premières Démarques, 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 des espaces mixtes avec leur texte. Ils sont utilisés pour 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 en PHP, donc quelque chose que je peux invoquer avec une classe serait parfait.
23 Septembre 2015 Mise À Jour
CKEditor a maintenant un Markdown addon qui fait cette chose exacte. 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'apparition de CommonMark est un changeur de jeu, et nous pourrions éventuellement voir un markup approprié interface pour CKEditor (lire les commentaires pour l'article complet).
6 Février 2015 Mise À Jour
CKEditor est maintenant livré avec un plugin qui sort (et accepte comme entrée) BBCode.
Demo: http://ckeditor.com/demo#bbcode
6 réponses
j'ai fait des recherches sur ce sujet l'autre jour et je n'ai pas trouvé d'éditeur WYSIWYG décent avec la sortie Markdown. En fait, tout d'abord, vous devez créer un éditeur de Markdown WYSIWG est wysiwg éditeur HTML et il ya juste quelques-uns d'entre eux qui sont utilisables sur le marché.
il y a une chance que vous puissiez créer dataProcessor pour CKEditor qui changera l'éditeur HTML en éditeur Markdown. Nous avons un plugin pour BBCode qui fonctionne comme ceci (vérifier http://nightly-v4.ckeditor.com/3737/samples/bbcode.html ).
Tout ce que vous avez à faire est de mettre en œuvre cette interface http://nightly-v4.ckeditor.com/ckeditor_api/#!/api / CKEDITOR.dataprocesseur . Si vous vérifiez le code du plugin BBCode, vous verrez des hacks et des trucs, car malheureusement L'architecture actuelle de CKEditor n'est pas prête (encore) pour créer un tel processeur de données. Cependant, je crois que si vous voulez fournir que peu de style options 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. Je suis surpris que cela n'apparaisse pas plus haut dans les résultats de recherche. J'ai dû passer par un avis sur lepture/éditeur trouver cet.
EDIT Sept 23, 2015
CKEditor a maintenant un Markdown 151970920" addon qui fait cette chose exacte. Le projet addon est hébergé sur github .
Screenshots:
comme publié dans ma mise à jour du 6 février 2015, CKEditor inclut maintenant les plugins qui permettent L'entrée et la sortie de BBCode.
une démo est disponible ici: http://ckeditor.com/demo#bbcode
EDIT Apr 13, 2015:
Quelqu'un prétendant développer CKEditor dit que l'apparition de CommonMark est un jeu changeur, et nous pourrions peut-être voir une interface de balisage appropriée pour CKEditor (lire les commentaires pour l'article complet).
Pen est un nouvel éditeur WYSIWYG (actif depuis 2014) qui produit Markdown .
Ce N'est pas parfait-j'ai eu des problèmes avec le collage HTML là-bas-mais cela fonctionne.
Edit: Sorry! il ne produit pas Markdown. Walery Strauch souligne dans les commentaires que les signes de formatage Markdown que j'ai vu étaient en fait CSS pseudo élément de règles:
encore, je vais le laisser ici comme une option puisque certaines personnes ont voté pour cette réponse et il peut avoir été utile à quelqu'un.
je suis également à la recherche d'un éditeur de markdown qui est décrit en haut de ce fil ""
Avez-vous vu "markdown outils": http://md-wysiwyg.sourceforge.net/
Démo: http://md-wysiwyg.sourceforge.net/cgi-bin/cgi_wysiwyg_test.py /
qui semble assez proche de ce que nous recherchons, il fait un travail raisonnable de prendre votre texte riche WYSIWYG et la sortie démarque. Cependant, il a échoué sur une exception d'encodage quand j'ai collé dans un texte riche d'un google doc.
j'ai implémenté un éditeur très simple qui permet au contenu d'un <textarea> qui contient Markdown d'être édité de manière WYSIWYG.
j'ai utilisé Hallo . Je ne pense pas que son site web le rend évident qu'il n'est pas lui-même un éditeur de Markdown WYSIWYG mais le Démo ne forge le chemin à un.
Hallo permet WYSIWYG édition du HTML à l'intérieur d'un <div> . J'ai utilisé javascript pour cacher tous les blocs <textarea> qui ont une classe spécifique wysiwyg CSS, 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 contenu <div> change. Il copie le contenu dans le (maintenant caché) <textarea> . Contenu est exécuté par à-markdown pour passer de HTML à Markdown.
si le <textarea> est un champ dans un <form >, alors le Markdown modifié sera envoyé au serveur lorsque ce formulaire sera soumis.
L'inspiration pour cela vient du Hallo Markdown exemple , spécifiquement le éditeur.js "1519230920 de fichier". J'ai utilisé comme base pour mon propre script avec hallo.js , épreuve de force.js et to-markdown.js .
Mon script, wysiwyg.js est un dérivé de éditeur.js de la Hallo Markdown Exemple . Quelques points à noter:
- - je l'utiliser dans une application Rails (non pas que ce qui compte)
- Il fonctionne sur
readyet aussi surpage:load, ce dernier parce que les Rails utilise Turbolinks - il fonctionne sur
ajaxCompleteparce que J'utilise Ajax pour les rapports d'erreur de formulaire - il y a d'autres dépendances: JQueryUI et Rangy (les utilisateurs de Rails peuvent profiter des gemmes jquery-ui-rails et rangy-rails ).
- Aussi Police Génial est utilisé pour les icônes de la barre d'outil. La version de
hallo.jsutilisée par la Démo est périmée (elle utilise une ancienne version de Font Awesome ) - utiliser hallo.js de GitHub à la place.
il suffit d'ajouter CSS class='wysiwyg' à tout <textarea> pour activer WYSIWYG dessus. Le <textarea> devrait conain texte formaté Markdown.
I on s'attendrait à ce que wysiwyg.js pourrait être facilement adapté pour utiliser un autre éditeur si vous n'aimez pas Hallo tant qu'il fonctionne sur le HTML dans un <div> . Il y en a beaucoup à choisir, mais tous ne sont pas aussi légers que Hallo .
un petit morceau de travail que j'ai trouvé est markdown-html-form . Il utilise le même Showdown et markdown .