Intégré Markdown éditeur de texte 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, le Markdown "WYSIWYG" les éditeurs sont souvent recommandés (tels que les messages comme cette ) ne sont pas du pur éditeurs WYSIWYG dans le sens que les utilisateurs écrivent toujours cru Markdown ( MarkItUp ) ou, à l'autre extrême de l'avoir dans l'édition en ligne sans contrôles standard ( Hallo ).
J'ai besoin de quelque chose entre les deux.
Je suis à la recherche d'un éditeur Markdown qui ressemble et fonctionne comme une dépouillé CkEditor zone de texte, et qui accepte et sorties de Markdown. Il devrait y avoir une barre d'outils avec un minimum d'options de mise en forme (B, I, U, listes, ect), et la zone d'entrée de texte doit montrer le converti Markdown, pas le code brut. Il devrait y avoir un bouton de Source qui va permettre aux utilisateurs de modifier les premières Démarques, mais même cela est facultatif. Ex:
- Je obtenir la raison pour Markdown/wiki, ect - la sécurité qu'il offre. Je n'ai pas l'esprit en entrant le code brut, comme ici à SOI, mais mes utilisateurs ne sont pas des geeks et de ne pas trouver cela agréable. Ils ne veulent pas voir * * * ___ et des espaces mixtes avec leur texte. Ils sont utilisés pour "Mot" style de montage, et sont plus productifs que d'environnement.
Donc est - il réellement intégré de l'éditeur WYSIWYG pour Markdown? J'écris en PHP, donc quelque chose que je peux invoquer avec une classe, ce serait parfait.
Sept 23, 2015 Mise À Jour
CKEditor a maintenant un Markdown addon que cette chose exacte. L'addon projet est hébergé sur github.
Captures d'écran:
Avr 13, 2015 Mise À Jour
Quelqu'un professant à développer CKEditor dit que l'apparition de CommonMark est un changeur de jeu, et nous pourrions peut-être voir un bon le balisage de l'interface pour CKEditor (lire les commentaires pour l'article complet).
Feb 6, 2015 Mise À Jour
CKEditor est désormais livré avec un plug-in que les sorties (et accepte en entrée) BBCode.
Démo: http://ckeditor.com/demo#bbcode
- Ahola Éditeur, comme indiqué dans cette réponse à la question, vous avez le lien à un éditeur WYSIWYG HTML5 qui semble faire exactement ce que vous êtes après. Il a même un soupçon du ruban Office. Pourquoi est-ce que vous avez réduit à cela?
- Ahola est edit-in-place. Voir l'image dans mon post nous avons besoin d'une statique de la boîte avec la limitation des options de mise en forme qui permettra d'afficher sur une page d'édition (avec plus d'options que simplement cette zone de texte). Il va induire en erreur les utilisateurs de l'EIP un peu de texte, puis ont à toujours aller à une autre section pour modifier les autres non-zones de texte. Il fonctionne mieux dans notre environnement d'une zone d'édition.
- Je crains que je ne peux pas vraiment le sens de votre dernier commentaire. Ahola est "edit-in-place", comme le sont tous les éditeurs WYSIWYG. Le Aholda zone d'édition est juste un
divet la barre d'outils est un autrediv, ceux-ci pourraient être les seules choses sur la page. Le Ahola solution qui répond à vos exigences pour un "minimum d'ensemble des options de mise en forme (B, I, U, listes, ect), et la zone d'entrée de texte doit montrer le converti Markdown, pas le code brut." S'il vous plaît pouvez-vous expliquer plus clairement pourquoi ce n'est pas une solution vous permettra de prendre en compte. - Si vous avez besoin de plus d'exemples de ce que je suis à la recherche d', voir ckeditor.com/demo ou tinymce.com/tryit/full.php --- ce sont des éditeurs HTML et ont environ 80% plus de fonctionnalités de mise en forme nécessaires, mais vous pouvez voir que les deux montrent une zone d'édition sans avoir à Cliquer pour le faire apparaître.
- Je ne travaille pas avec les technophiles de personnes. Ils ne vont pas devoir aller à la page d'édition (où ckEditor semble actuellement) et de cliquer sur une zone de texte dans le but d'invoquer la réelle fenêtre de l'éditeur. La fenêtre d'édition doit afficher par défaut (comme il le fait maintenant) sans avoir à cliquer pour le faire apparaître. C'est un extra, étape inutile.
- Markdown remplace tous ces éditeurs WYSIWYG par lui-même. Pourquoi auriez-vous besoin pour une sortie en markdown?
- Parce qu'il est sûr de stocker et d'afficher plus tard, au lieu du HTML?
- J'ai le même problème. Avez-vous trouvé une solution?
- Concernant la CKEditor la production de BBCode. Je suppose que vous pouvez convertir le BBCode de Markdown, mais qui semble contre-productif parce que certains utilisateurs peuvent réellement envie d'entrer Markdown bc de la puissance qu'il offre. J'ai aussi vu un commentaire par un CKEditor développeur de se lamenter sur le fait que Markdown n'est pas un cahier des charges et qu'il est donc inutile de créer un abattement de filtre je suis également curieux de connaître l'impact de copier-coller à partir de Word sur le code résultant
- Je ne reçois pas cette question soit. Soit vous utiliser Markdown pour générer des pages HTML ou si vous utilisez un éditeur WYSIWYG pour générer le code HTML. Pourquoi voudriez-vous d'utiliser un éditeur WYSIWYG pour générer Markdown? Si c'est vraiment ce que vous voulez, vous pouvez toujours utiliser CKeditor et de transformer le code HTML de Markdown.
Vous devez vous connecter pour publier un commentaire.
Je faisais des recherches à ce sujet l'autre jour et je n'ai pas trouvé tout bon éditeur WYSIWYG avec des Réductions de sortie. En fait, vous devez d'abord créer un WYSIWG éditeur Markdown est WYSIWG éditeur HTML et il ya seulement quelques-uns d'entre eux qui sont utilisables sur le marché.
Il ya une chance que vous serez en mesure de créer
dataProcessorpour CKEditor qui va changer l'éditeur HTML dans l'éditeur Markdown. Nous avons un plugin pour le BBCode qui fonctionne comme ceci (découvrez 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.dataProcessor. Si vous cochez le BBCode en code du plugin, vous pourrez voir quelques hacks et astuces, parce que malheureusement courant CKEditor l'architecture n'est pas prêt (encore) pour créer un tel processeur de données. Cependant, je crois que si vous voulez fournir seulement quelques options de style, vous devriez être en mesure de mettre en œuvre des Réductions de soutien très rapidement.
SimpleMDE, un nouveau venu, peut-être la réponse. J'ai été la recherche de quelque chose un peu comme ça depuis un mois maintenant. Je suis surpris que ce ne soit pas apparaître plus haut dans les résultats de recherche. J'ai dû passer par un avis sur lepture/éditeur de trouver cela.
MODIFIER Sept 23, 2015
CKEditor a maintenant un Markdown addon que cette chose exacte. L'addon projet est hébergé sur github.
Captures d'écran:
Comme posté dans mon Feb 6, 2015 mise à jour, CKEditor comprend maintenant des plugins qui permettent le BBCode d'entrée et de sortie.
Une démo est disponible ici: http://ckeditor.com/demo#bbcode
MODIFIER Avr 13, 2015:
Quelqu'un professant à développer CKEditor dit que l'apparition de CommonMark est un changeur de jeu, et nous pourrions peut-être voir un bon le balisage de l'interface pour CKEditor (lire les commentaires pour l'article complet).
Stylo est une nouvelle (actif à partir de 2014) de l'éditeur WYSIWYG que
sorties Markdown.Il n'est pas parfait—j'ai eu des problèmes avec coller le HTML, mais il fonctionne.
J'ai mis en place un système très simple éditeur qui permet au contenu d'un
<textarea>qui contient Markdown pour être édité dans un mode WYSIWYG.J'ai utilisé Hallo. Je ne pense pas que son site web rend évident qu'elle n'est pas en soi un Abattement de l'éditeur WYSIWYG, mais le démo ne forge le chemin d'accès à un.
Hallo permet WYSIWYG HTML à l'intérieur d'un
<div>. J'ai utilisé du javascript pour cacher tout<textarea>blocs qui ont unwysiwygclasse CSS, pour le remplacer par un<div>et copier le contenu de la<textarea>dans le<div>. La copie traverse Showdown qui produit du HTML à partir de Markdown.Une autre routine Javascript réagit à chaque fois que la
<div>la modification de contenu. Il copie le contenu de retour dans le (caché)<textarea>. Le contenu est géré par à markdown pour convertir en HTML au format Markdown.Si le
<textarea>est un champ dans une<form>, puis le fichier Markdown sera envoyé au serveur lorsque le formulaire est soumis.L'inspiration pour cette vient de la Bonjour Markdown Exemple, plus précisément le editor.js fichier. J'ai utilisé comme base pour mon propre script avec hallo.js, showdown.js et to-markdown.js.
Mon script, wysiwyg.js est un dérivé de la editor.js de la Bonjour Markdown Exemple. Quelques points sont à noter:
readyet aussi surpage:load, la dernière parce que les Rails utilise TurbolinksajaxCompleteparce que j'utilise Ajax pour la forme de rapports d'erreurhallo.jsutilisé par le démo est pas à jour (il utilise une vieille version de Police Impressionnant) - utilisation hallo.js à partir de GitHub à la place.Vous avez seulement besoin d'ajouter des CSS
class='wysiwyg'à tout<textarea>pour permettre WYSIWYG sur elle. Le<textarea>devrait conain Démarque du texte formaté.Je m'attends à 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 code HTML dans un
<div>. Il existe assez peu de choix mais tous ne sont pas aussi léger que Hallo.Un smilar pièce de travail que j'ai trouvé est markdown-html-forme. Il utilise le même Showdown et à markdown.
wysiwyg.js, mais ne répond à aucun des de grands succès. Vous vous demandez si vous disposez d'un accompagnement HTML planqué dans un résumé quelque part ainsi? La version Stable de la liste des dépendances, etc.? Merci!Je suis également à la recherche d'un éditeur markdown qui est décrit dans le 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 sommes à la recherche pour, il fait un travail raisonnable de prendre votre WYSIWYG de texte riche et à la sortie de markdown. Cependant, il a échoué sur une exception lors de l'encodage, j'ai collé dans certains riches texte à partir d'un google doc.