Qui Débordement de Pile-style de Démarque (ADM), éditeur de JavaScript dois-je utiliser?

Question

Arrière-plan

Je travaille sur une application qui nécessite saisies par l'utilisateur du contenu, et j'ai décidé d'utiliser un Débordement de Pile-style Démarque de l'éditeur. Après des recherches sur ce sujet depuis quelques jours, je me rends compte il y a de nombreuses fourches de la base ADM de l'éditeur, certains avec quelques améliorations de base et certains avec de sérieuses différences de le Dépassement de Pile.

Puisque ce sera le cœur de l'application, j'aimerais commencer avec le meilleur de la base de code que je peux. Je serais heureux si quelqu'un peut vous recommander de l'une des nombreuses solutions la mieux adaptée à mes besoins.

Ci-dessous sont des exigences, en plus de ce que j'ai réussi à trouver déjà. J'espère que cette question va m'aider à choisir la version à aller avec, et peut-être m'aider à découvrir un port c'est encore mieux l'adapter à mes besoins.

---

Les exigences pour mon projet

• L'aperçu en direct
• Plusieurs éditeurs sur la même page (je ne sais pas combien à l'avance, car l'utilisateur peut ajouter dynamiquement une autre boîte d'édition).
• Possibilité de prolonger avec les boutons supplémentaires (je voudrais un bouton pour envoyer une image, au lieu de simplement ajouter un img d'URL).
• Capacité dynamique d'afficher/masquer la zone d'édition (et seulement voir l'aperçu de la boîte).
• Pas un must, mais je préfère rester le plus près de Débordement de Pile, car c'est bien connu.
• Ne sais pas si cela est important, mais le backend est écrit dans Django.

Les éditeurs que j'ai regardé

Voici quelques-uns des bases de code que j'ai regardé, avec des pensées. Évidemment, j'ai peut-être raté une autre solution.

• Le derobins version. À partir de ce que je peux dire, c'est officiel Débordement de Pile version. Me semble qu'il ne prend pas en charge plusieurs éditeurs sur une seule page.
• jQuery.MarkEdit. L'air très bon, mais il est assez différent de celui de l'Débordement de Pile version.
• MooWMD. Ressemble le gagnant pour l'instant, mais je m'inquiète un peu car il a l'air de moins en moins actif/hackable que MarkEdit.
• L' adm nouvelle version. Pas sûr, ressemble à une ancienne base de code sans beaucoup d'utilisation.
• Le SocialSite de la branche. On dirait que c'est pas pour un usage public.

Answer 1

À la fin, après en cherchant un peu plus pour un ready-made de l'éditeur, je me suis installé sur le OpenLibrary ADM port, situé à http://github.com/openlibrary/wmd.

Les raisons que j'ai choisi cet éditeur

1. Répond à la plupart de mes besoins.
2. Ressemble à un Débordement de Pile de l'éditeur. Il y a quelques différences de comportement (voir ci-dessous).
3. Construit sur le haut de jQuery (et ne nécessite pas de MooTools, ce qui est un avantage sur l'autre concurrent sérieux, mooWMD).

J'ai fini la mise en œuvre de la fonctionnalité qui affiche/masque le champ, moi-même, qui s'est avéré assez facile pour la plupart. Je n'ai pas prolongé l'éditeur, avec des boutons, qui j'en suis sûr, auront besoin de certains de déconner dans sa source, mais je ne pense pas qu'il sera trop grand d'une affaire.

Les différences de la version de Débordement de Pile

Il y a quelques différences avec le Débordement de la Pile de l'éditeur:

1. Single entre à la fin des lignes de provoquer un <br/>, au lieu d'être considéré comme un paragraphe. Je préfère de cette façon, donc je suis très bien avec ce changement.
2. Les listes numérotées sont numérotation automatique, ala Microsoft Word. C'est, frapper Enter après avoir écrit "1. premier élément" sera automatiquement vous une ligne qui commence par "2. ". C'est aussi un changement que j'aime vraiment.

Eh bien, j'espère que cela aide quelqu'un à la recherche pour un même éditeur. Si je finis la personnalisation de l'éditeur, je vais créer ma propre branche (il est distribué sous la licence MIT), mais pour l'instant je m'en sors sans bricoler avec le code source.

Answer 2

Eh bien, cette question (et des solutions) sont plus très jeune, alors j'ai pensé que peut-être que je l'avais mis quelque chose jusqu'à ce jour. :)

C'est le début de l'année 2014, et quand j'ai atteint le même problème, j'ai finalement utilisé PageDown-Bootstrap. C'est un Twitter Bootstrap basé sur les ADM de l'éditeur, entièrement personnalisable Style Bar (Barre de boutons).

Il y a aussi une alternative appelée Bootstrap-Markdown, qui a également l'air très prometteur.

Answer 3

Pour l'aperçu en direct de la partie, l' épreuve de force de la bibliothèque est assez facile de travailler avec (et que Edan points, est inclus dans la base de code)

Vous l'utilisez quelque chose comme ceci (n'avez pas besoin d'utiliser jQuery si vous ne voulez pas)

$(document).ready(function(){
    var converter = new Attacklab.showdown.converter();
    function update_description_preview(){
        $('#description-preview').html(converter.makeHtml($("#id_description").val()));
    }
    update_description_preview();

    $("#id_description").keyup(function(){
        update_description_preview();
    });
});

Le update_description_preview fonction utilise le convertisseur de l'objet à lire la démarque dans le #id_description élément, et la déverse dans le #description-aperçu de l'élément.

Ici, je vais appeler la fonction à droite après il est défini à l'initialisation de la preview de windows (il y avait un peu de texte pré-chargé dans l'éditeur)

Dernier bit est juste l'enregistrement de la fonction avec l'événement keyup.

Answer 4

Vous ne savez pas si elle s'inscrit pleinement aux exigences anciennes, mais une autre solution est disponible en 2014 est Open Source de l'éditeur Markdown avec aperçu sous licence Apache 2.0 et créé par topten logiciel.

Démonstration en ligne est disponible ici: http://www.toptensoftware.com/markdowndeep/dingus

Answer 5

La norme Commune en matière de Démarque comprend autonome fichier javascript pour convertir le format markdown en html. Il est facile à mettre en œuvre comme indiqué dans l'officiel de la démo ou de ce plunker.

En gros:

<script src="//jgm.github.io/stmd/js/stmd.js"></script>
...
var reader = new stmd.DocParser();
var writer = new stmd.HtmlRenderer();
...
var parsed = reader.parse("Some **markdown** text");
var result = writer.renderBlock(parsed);