Discussion :

[Amnael]

Bonjour,

pour m'amuser, et un peu également aussi pour pouvoir me resservir de tout ça par la suite, j'aimerais réaliser un "editeur de texte" comme on en trouve sur n'importe quel forum pour poster un message.

J'imagine bien qu'il est tout à fait possible de prendre des templates qui font tout ça directement, mais j'aimerais bien re-inventer la roue sur ce coup là^^

========================


Enfin bref, typiquement, quand je sépare niveau conception, je vois deux objets principaux:

- Une zone de saisie de texte.
- Une zone avec des boutons.

Donc coté design, aucun problème, ce sont des éléments basiques j'en fais ce que je veux.

Mais, coté "traitement"

il va falloir traiter les opérations offerts par les boutons, en passant j'imagine par du javascripts.


En admettant que j'ai un unique bouton (b pour mettre en gras par exemple).

Je soulève 3 cas différents:


a- La zone de texte est vide --> En cliquant sur [b], on va insérer du texte, ça ne pose pas de problème


b- La zone de texte n'est pas vide et aucun texte n'est sélectionné
c- La zone de texte n'est pas vide et du texte est sélectionné


Pour le cas b, il faut insérer les balises vides à la position du curseur en recopiant ce qui est après et avant le curseur. Hors, là il me manque un peu de technique et je ne vois pas comment faire ça en javascript. Je suis capable de récupérer le texte d'un composant, mais comment déterminer à quel endroit se situe le curseur ? Mystère, et j'aimerais bien un petit indice^^

Pour le cas c, c'est plus ou moins le même problème sauf qu'en plus il faudra récupérer le texte sélectionné (j'ai jamais fais, mais je pense qu'il doit y avoir quelques fonctions pour récupérer ce genre d'event, donc je devrais me débrouiller); la vrai difficulté de base vient donc du point b.


Notez que j'évoque javascript mais c'est surtout parce que je ne vois pas trop comment faire ça nativement avec simplement html/css.

Merci à vous !

[ABCIWEB]

Il y a deux systèmes couramment employés :

1/ Le système bbcode qu'on trouve souvent dans les forums. C'est le plus facile à mettre en place et à contrôler mais peu pratique et assez austère pour les utilisateurs et un peu obscur pour les utilisateurs débutants. Mais bon on peu déjà faire pas mal de mise en page. Fais des recherches avec le terme "bbcode" pour plus d'infos. On peut bricoler un système de "bbcode" fait maison assez facilement.

2/ Un système wysiwyg (what you see is what you get) où l'on voit la mise en forme directement sans passer par un système de balises spécifiques comme avec bbcode. Les modules les plus couramment cités sont TinyMCE (employé dans wordpress et joomla par exemple) et CKEditor.

Pour en créer un soi-même la technique la plus simple est d'utiliser javascript et l'attribut html "contentEditable" mais ce n'est pas facilement transposable d'un navigateur à l'autre par exemple un texte édité dans Firefox ne sera pas facilement modifiable dans IE. Tu peux faire des recherches avec "wysiwyg tuto" pour en savoir plus mais je te déconseille de te lancer dans l'aventure pour l'instant car il faut de très bonnes connaissances en javascript/html et beaucoup de travail pour avoir un éditeur fiable et complet aussi on utilise la plupart du temps des modules tout faits.

[Amnael]

Salut et merci, j'essaierais tout de même par curiosité d'en réaliser un moi même.

Je suis déjà familiarisé des éditeurs bbcode et wysiwyg; les deux sont toujours disponibles de base sur des forums tels que forumactif par exemple.

Mais si je fais un site de a à z et que je veux en inclure un, il faut bien que j'arrive à coder le bébé^^

J'imagine bien que les cms comme wordpress ou joomla propose des modules tout fait

Mais l'idée pour moi ce serait de pouvoir l'intégrer sur n'importe quel site et sans utiliser un cms en particulier.

Maintenant, s'il existe des templates pour ce genre de choses je serais assez curieux d'y jeter un coup d'oeil, même si je ne suis pas assez bon pour en faire un en totalité, je pense avoir assez de connaissances pour comprendre et modifier une solution de base.

Ceci étant dit, dans mes recherches je n'ai jamais trouvé des templates pour ça...peut-être que je cherche en utilisant les mauvais termes mais bon ==)

Genre un site comme celui ci mais proposant des éditeurs ce serait parfait
https://html5up.net/

[ABCIWEB]

TinyMCE est l'éditeur par défaut choisi par wordpress et joomla mais il est autonome, tu peux l'adapter sur d'autres cms. Il n'a pas été créé spécifiquement pour wordpress et joomla même s'ils l'utilisent. Pareil pour CKEditor.

Je comprends pas le terme "templates" dans ce contexte. Un template est un programme pour structurer l'affichage d'une page web (contenu et menus). Cette page peut être constituée de différents paragraphes dont le contenu peut être créé avec un module wysiwyg mais ce module n'est pas un template en soit, il créera simplement du html qui pourra être utilisé dans le template.

[Amnael]

Pardon, il est vrai que j'utilise template un peu à tord et à travers !

Pour moi template c'est surtout synonyme de: "Bout de code libre de droit et réutilisable"; et c'est pas spécifique à une techno en particulier. En abusant du terme j'irai même jusqu'à dire que les design pattern sont en quelque sorte des templates.


(Enfin ça c'est juste pour essayer de faire comprendre de quoi je parlais, je n'ai pas la prétention de dire que ma définition est correcte !)