[jQuery] - Quelques questions sur les tabulations

Par Laznet, il y a 9 ans

Javascript

Bonsoir,

Dans le but de créer un éditeur de code je suis en train de coder le module pour gérer les tab et les retours a la ligne.
J'ai choisi comme solution de mettre le caractère \n et \t pour faire ceci.

EDIT : Après quelques recherche j'ai vu qu'il fallait mieux utiliser \r pour le retour charriot ^^.

Sauf que j'ai remarquer un trucs :
Ma tabulation fonctionne bien. Mais quand je met un texte pour justement utiliser la tabulation dessus ça ne fonctionne plus.
(J'ai aussi essayer avec des espaces).

Donc ma question est : Comment bien gérer la tabulation ?
J'aurais aussi une autre question :

Selon vous, entre une div avec contenteditable à true, une balise code, et un textarea.
Quelle est le meilleur moyen pour faire un véritable éditeur de code ?

3 réponses

PhiSyX, il y a 9 ans

Yop.

Utilise la propriété CSS white-space avec comme valeur pre ou pre-wap de sorte à conserver les espaces (tabs compris), sauts de lignes, etc..

Si je devais faire un éditeur de code, pour répondre à ta derniere question, j'utiliserai une div contenteditable.
Pourquoi? C'est plus sympa pour l'utilisateur, qui tape son code, qui pourrait voir son code directement dans la div avec les bonnes mises en formes (gras/souligné/...) et couleurs. Tandis qu'un textarea, tu es limité, tu ne peux pas y mettre de mise en formes et couleurs à differents endroits, etc.... Et je pense que c'est ce que tous ont fait (ceux qui ont crée des éditeurs de code)

Laznet, il y a 9 ans

Bonjour,

Tu peux m'en dire plus sur ton choix "contenteditable" par exemple qu'est ce qu'il permet de "faire" et que les autres ne peuvent pas.
Même si c'est vrai que textarea est particulièrement chiant :D

Mais d'après ce que je comprend tu conseillerais contenteditable pour par exemple du Markdown ?

PhiSyX, il y a 9 ans

Ce qu'il permet de faire, il y a beaucoup d'exemples sur le net.
Un exemple parmi tant d'autres: http://jakiestfu.github.io/Medium.js/docs/ (Ça n'est pas un éditeur de code)
Si tu inspectes via la devtool, tu y verras que tous leurs champs de textes sont en fait tous des divs avec un contenteditable..