Éditeur de texte WYSIWYG Markdown intégré
En cherchant un éditeur WYSIWYG simple pour le code Markdown, je ne trouve pas une interface utilisateur comparable à celle de CkEditor, TinyMCE, etc.
Plus précisément, les éditeurs "WYSIWYG" de Markdown qui sont souvent recommandés (tels que des publications telles que this ) ne sont pas de véritables éditeurs WYSIWYG dans le sens où les utilisateurs écrivent toujours des Markdown bruts ( MarkItUp ) ou aller à l'autre extrême d'avoir l'édition en ligne sans contrôles standard ( Hallo ).
J'ai besoin de quelque chose entre les deux.
Je cherche un éditeur de Markdown qui ressemble à une zone de texte réduite de CkEditor et qui fonctionne, 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, etc.), et la zone de saisie de texte devrait montrer 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, etc. - la sécurité qu’il offre. Cela ne me dérange pas de saisir du code brut comme ici chez 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, existe-t-il un éditeur WYSIWYG véritablement intégré pour Markdown? J'écris en PHP, donc quelque chose que je peux invoquer avec une classe serait parfait.
Mise à jour du 23 septembre 2015
CKEditor a maintenant un Markdown addon qui fait exactement cela. Le projet addon est hébergé sur github .
Captures d'écran:
Mise à jour du 13 avril 2015
Quelqu'un prétendant développer CKEditor dit que l’apparence de CommonMark change la donne, et que nous pourrions peut-être voir un interface de balisage pour CKEditor (lire les commentaires de l'histoire complète).
Mise à jour du 6 février 2015
CKEditor est maintenant livré avec un plugin qui génère (et accepte en entrée) 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 qui est un éditeur HTML WYSIWG et il n’ya que très peu d’entre eux utilisables sur le marché.
Il est possible que vous puissiez créer dataProcessor pour CKEditor qui modifiera l'éditeur HTML en éditeur Markdown. Nous avons un plugin pour le BBCode qui fonctionne comme ceci (check out 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 plug-in BBCode, vous verrez quelques astuces 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 souhaitez fournir seulement quelques options de style, vous devriez pouvoir implémenter 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. Je devais passer par un avis sur lepture/editor pour le trouver.
EDIT le 23 septembre 2015
CKEditor a maintenant un Markdown addon qui fait exactement cela. 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 plug-ins permettant l'entrée et la sortie en 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 peut-être voir un interface de balisage pour CKEditor (lire les commentaires de l'histoire complète).
Stylo est un nouvel éditeur WYSIWYG (actif à partir de 2014) qui sorties Markdown.
Ce n'est pas parfait - le collage de code HTML me pose problème, mais cela fonctionne.
Edit: Désolé! Il ne génère pas de Markdown. Walery Strauch indique dans les commentaires que les signes de formatage de Markdown que j'ai vus étaient en réalité un pseudo CSS règles d'élément:
Néanmoins, je le laisserai ici comme option car certaines personnes ont voté pour cette réponse et cela a peut-être été utile à quelqu'un.
J'ai implémenté un éditeur très simple qui permet le contenu d'un <textarea> qui contient Markdown à éditer de manière WYSIWYG.
J'ai utilisé Hallo . Je ne pense pas que son site Web indique clairement que ce n’est pas en soi un éditeur WYSIWYG de Markdown, mais le démo en forge le chemin.
Hallo permet l'édition WYSIWYG du code HTML à l'intérieur d'un <div>. J'ai utilisé javascript pour cacher n'importe quel <textarea> blocs qui ont une classe spécifique wysiwyg CSS et la remplacent par un <div> et copier 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> le contenu change. Il copie le contenu dans le (maintenant caché) <textarea>. Le contenu est exécuté to-markdown pour convertir de HTML en Markdown.
Si la <textarea> est un champ dans un <form>, le Markdown modifié sera envoyé au serveur lors de l'envoi de ce formulaire.
L’inspiration pour cela vient du fichier Hallo Markdown Example , plus précisément du 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 Hallo Markdown Example . Quelques points à noter:
- J'utilise ceci dans une Rails (pas que cela compte))
- Il fonctionne sur
readyet aussi surpage:load, ce dernier parce que Rails utilise Turbolinks - Il fonctionne sur
ajaxCompleteparce que j'utilise Ajax pour les rapports d'erreur de formulaire. - Il existe d'autres dépendances: JQueryUI et Rangy (Les utilisateurs de Rails peuvent bénéficier des gemmes jquery-ui-Rails et rangy-Rails ).
- De plus, Font Awesome est utilisé pour les icônes de la barre d’outils. La version de
hallo.jsutilisé par le démo est obsolète (il utilise une ancienne version de Font Awesome ) - utilisez hallo.js de GitHub à la place.
Vous devez seulement ajouter CSS class='wysiwyg' à n'importe quel <textarea> pour activer WYSIWYG dessus. Le <textarea> devrait contenir du texte formaté par Markdown.
Je m'attendrais à ce que wysiwyg.js puisse être facilement adapté pour utiliser un autre éditeur si vous n'aimez pas Hallo tant que cela fonctionne sur le code HTML dans un <div>. Il y en a plusieurs parmi lesquels choisir mais tous ne sont pas aussi légers que Hallo .
Un petit travail que j'ai trouvé est markdown-html-form . Il utilise les mêmes Showdown et to-markdown .
Je cherche aussi un éditeur de démarques décrit en haut de ce fil
Avez-vous vu des "outils de démarquage": 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 prend un travail raisonnable de prendre votre texte enrichi WYSIWYG et de le démarquer. Toutefois, une exception d’encodage a échoué lorsque j’ai collé du texte riche à partir d’un document Google.