Enveloppez le markdown dans le HTML approprié avec JavaScript

Question

J'ai un

éditable par le contenu.

Lorsqu'une syntaxe Markdown correcte est saisie dans le div, je dois ajouter le HTML correct autour, mais préserver les caractères Markdown à l'intérieur. Par exemple:

# Mon H1

serait interprété comme

# Mon H1

C'est similaire à la façon dont fonctionne iA Writer, et je pense que Byword le fait aussi.

Quelque chose qui fonctionne de cette façon?

Answer 1

Ça semble être un projet intéressant.

Si vous utilisez content-editable et que vous souhaitez mettre à jour la saisie de l'utilisateur en temps réel, vous devrez probablement vous plonger dans des choses plutôt complexes, surtout si vous voulez prendre en charge IE.

J'ai en fait écrit deux petites bibliothèques Caret et Wysiwyg qui pourraient vous aider, jetez un coup d'œil aux exemples pour chacune.

Vous pouvez utiliser Caret pour suivre la saisie de l'utilisateur, puis utiliser Wysiwyg pour des choses comme envelopper la ligne dans une balise h1. L'enveloppement de la ligne est un peu délicat, vous pouvez probablement consulter le code source de Caret pour quelques conseils cependant.

Même si vous n'utilisez aucune des bibliothèques, elles devraient vous aider à démarrer.

Answer 2

Dans ma compréhension, vous essayez de créer un éditeur Markdown avec une sorte de mise en évidence de la syntaxe. J'aime l'idée mais je pense qu'une telle chose n'existe pas encore. Markdown est conçu pour être "facile à lire / facile à écrire" assez pour éviter d'avoir à utiliser un éditeur complexe. Pagedown par exemple est un peu contraire à ce principe (même si c'est un excellent outil).

Quoi qu'il en soit, si vous voulez implémenter cela vous-même, vous aurez plusieurs choix :

• En amont du convertisseur Markdown en modifiant

  # Mon H1

  à

  # # Mon H1

• En aval du convertisseur Markdown en modifiant

  Mon H1

  à

  # Mon H1

  Mais ce n'est pas la méthode préférée puisque Markdown n'est pas bijectif, je suppose que vous ne voulez pas avoir ce genre de conversion :

  Mon H1
  =====

  à

  # Mon H1

• Modifier le convertisseur Markdown si vous avez accès au code source ou en créer un nouveau.

En tout cas, vous devrez être très à l'aise avec les expressions régulières.

Answer 3

Si vous travaillez avec un DOM bien formé - regardez les fonctions de wrap de jquery

.wrap()
.wrapAll()
.wrapInner()

Answer 4

Vous pouvez commencer à lire quelque chose sur cette question stackoverflow.

Vous pouvez analyser le texte en lignes en utilisant la méthode split et le retour chariot comme regex. Ensuite, avec le texte divisé en un tableau, vous pouvez utiliser document.createElement() pour créer dynamiquement de nouveaux éléments tels que des balises h1. Ensuite, ajoutez ces balises au dispositif d'affichage du contenu et le formatage sera fait.

Vous devez noter qu'il y a beaucoup de travail à faire car vous devez tenir compte de plusieurs situations :

1. Que se passe-t-il si le texte est juste mis en forme
2. Que se passe-t-il avec le texte qui ne l'est pas
3. ¿Voulez-vous le vérifier à chaque fois que l'utilisateur saisit une lettre?
4. ¿Et le formatage d'un tableau complet?

Une fois que vous avez réfléchi à tous ces conseils et un peu de code JavaScript, vous y arriverez.

MISE À JOUR : bien sûr, c'est si vous souhaitez créer votre propre bibliothèque avec votre propre politique de syntaxe (je recommande de la mélanger avec jQuery). Si ce n'est pas votre objectif, vous pouvez utiliser certaines bibliothèques qui ont été mentionnées dans d'autres réponses.