Ce qui Stack Overflow style Markdown (ADM) éditeur JavaScript dois-je utiliser?

StackOverflow https://stackoverflow.com/questions/2874646

Question

Arrière-plan

Je travaille sur une application qui nécessite le contenu entré par l'utilisateur, et je l'ai décidé d'utiliser une pile de style trop-plein éditeur Markdown. Après avoir étudié ce sujet depuis quelques jours, je me rends compte qu'il existe de nombreuses fourches de la base éditeur ADM, certaines avec quelques améliorations de base et certaines avec des différences graves de l'un débordement de pile.

Comme ce sera le cœur de l'application, je voudrais commencer par la meilleure base de code que je peux. Je serais heureux si quelqu'un peut recommander que l'une des nombreuses solutions là-bas correspond le mieux à mes besoins.

Voici les exigences, plus ce que j'ai réussi à trouver déjà. J'espère cette question me aider à décider quelle version pour aller avec, et peut-être me aider à découvrir un port qui est un meilleur ajustement pour mes besoins.

Les exigences pour mon projet

  • Aperçu en direct
  • éditeurs multiples 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é d'extension avec des boutons supplémentaires (je voudrais un bouton pour télécharger une image, au lieu de simplement ajouter une URL img).
  • Possibilité d'afficher dynamiquement / cacher la zone d'édition (et seulement voir la zone de prévisualisation).
  • Pas un must absolu, mais je préfère rester aussi près de l'apparence de débordement de la pile et la sensation, car il est bien connu.
  • Je ne sais pas si cette question est importante, mais le back-end est écrit dans Django.

Editeurs J'ai regardé

Voici quelques-unes des bases de code que je l'ai regardé, avec des pensées. De toute évidence, je pourrais être absent une autre solution là-bas.

  • La version derobins. D'après ce que je peux dire, c'est la version officielle Stack Overflow. On dirait qu'il ne supporte pas plusieurs éditeurs sur une page.
  • jQuery.MarkEdit . Semble très bien, mais est assez différent de la version Stack Overflow.
  • MooWMD . On dirait le gagnant en ce moment, mais je suis un peu inquiet car il semble moins actif / abrégeable que MarkEdit.
  • WMD-nouvelle version . Je ne sais pas, on dirait un vieux sans utiliser beaucoup codebase.
  • SocialSite branche . On dirait que ce n'est pas pour un usage public.
Était-ce utile?

La solution

En fin de compte, après avoir regardé autour d'un peu plus pour un éditeur tout prêt, je me suis installé sur le port ADM OpenLibrary, situé à http://github.com/openlibrary/wmd .

Les raisons pour lesquelles je choisi cet éditeur

  1. rencontre plus de mes besoins.
  2. On dirait que l'éditeur de débordement de pile. Il y a quelques différences de comportement (voir ci-dessous).
  3. est construit sur jQuery (et ne nécessite pas MooTools , ce qui est un plus sur l'autre candidat sérieux, mooWMD ).

J'ai fini par mettre en œuvre la fonctionnalité qui ouverture / fermeture du EditBox moi-même, qui se révéla assez facile pour la plupart. I pas étendu l'éditeur avec les boutons, dont je suis sûr, il faudra un peu de déconner dans sa source, mais je ne pense pas que ce sera trop gros problème.

Différences de la version Stack Overflow

Il y a quelques différences de la pile éditeur Overflow:

  1. unique entre à la fin des lignes provoquent une <br/>, au lieu d'être considéré comme un paragraphe. Je préfère lui arriver de cette façon, donc je suis très bien avec ce changement.
  2. Les listes numérotées sont numérotées automatiquement, ala Microsoft Word. C'est, frapper Entrée après avoir écrit « 1. premier élément » vous obtiendrez automatiquement une ligne qui commence par « 2 ». Ceci est aussi un changement que je vraiment.

J'espère que cela aide tous ceux qui cherchent un éditeur similaire. Si je finis par la personnalisation de l'éditeur, je vais créer ma propre branche (il est sous licence MIT), mais en ce moment je suis en train de partir sans bricoler avec le code source.

Autres conseils

Eh bien, cette question (et les solutions) obtiennent assez vieux, donc je pensais que je mettrais quelque chose à jour ici. :)

Il est le début de l'année 2014, et quand je suis arrivé le même problème j'ai finalement utilisé PageDown-Bootstrap . Il est un éditeur ADM à base Bootstrap Twitter, entièrement personnalisable avec bar style (barre de boutons).

Il y a aussi une alternative appelée Bootstrap-Markdown , ce qui semble très prometteur.

Pour la partie aperçu en direct, Showdown bibliothèque est assez facile de travailler avec ( et comme le souligne Edan out, est inclus dans le code de base)

Vous utiliser quelque chose comme ça (ne pas avoir 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();
    });
});

La fonction update_description_preview utilise l'objet de convertisseur pour lire le démarquage dans l'élément #id_description, et il déverse dans l'élément # Description-aperçu.

Ici, je fais appel le droit de fonction après qu'il est défini pour initialiser les fenêtres d'aperçu (il y avait une pré-chargé dans l'éditeur de texte)

Dernier bit est juste la fonction enregistre l'événement keyup.

Je ne sais pas si elle correspond pleinement aux anciennes exigences, mais une autre solution disponible en 2014 est l'éditeur Open Source Markdown avec prévisualisation sous licence Apache 2.0 et créé par le logiciel Topten.

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

Standard Markdown commune inclut un fichier javascript autonome pour convertir démarquage en html. Il est facile à mettre en œuvre comme indiqué dans la démo officielle rel="nofollow"> ou cette 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);
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top