Bonjour à tous,

Je cherche à integrer un éditeur WYSIWYG à mon site, mais comme les solutions toutes faites ne me conviennent pas, je cherche à le faire moi même.

Et si possible en jQuery...

J'ai suivit le cours sur le sujet dispo ici : https://openclassrooms.com/courses/creez-un-editeur-de-texte-wysiwyg et il y a une seule chose qui m'échappe : quelle est la commande qui permet d’insérer des balises (ca je sais faire) autour du texte sélectionné (c'est cette partie qui m’intéresse) ?

Je peux me contenter de copier le code du cours, et de le compléter mais j'aimerais comprendre le principe. De plus j'ai beau chercher mais je ne trouve pas comment le faire en jQuery (le cours donne que du code JS).

Merci d'avance pour vos réponses 

Salut.

Tout d'abord, le jQuery est du JS. Ensuite, les éditeurs WYSIWYG posent certains problèmes. L'idéal est d'écrire à l'aide d'un langage comme le markdown, puis de convertir ce langage en HTML.

Par exemple, l'utilisateur saisi : "Voici un texte en **gras**.

Oui j'ai pris connaissance du Markdown, mais les personnes qui vont utiliser l'éditeur de texte on besoin qu'on les accompagne le plus possible, d'ou mon envie d'utiliser un éditeur WYSIWYG.

Je leur ai déjà présenté ce genre de solution (ainsi que du BBcode) mais ça ne conviens pas. Ils s'en sortent pas.

C'est du JS, mais comme je préfère coder en jQuery (j'ai pas encore trop étudié le JS pur), c'est pour ca que je demande comment formuler ce type de code en jQuery. J'ai beau chercher je ne trouve pas ma réponse. Ca n'existe pas ?

J'en profite du coup, je suis curieux de connaitre quels sont les problèmes dont tu parle concernant  les éditeurs WYSIWYG ?

D'accord. N'étant pas très informé sur le jQuery, je ne sais pas si ça existe. Mais ça reste relativement simple en JS pur.

Ceci peut t'aider (sélectionne un bout du texte puis désélectionne-le, il passe en vert) : http://jsfiddle.net/edisonator/2w35p/35/

Le WYSIWYG génère un code HTML sans tenir compte de la sémantique propre au HTML. Pour donner un exemple simple et pas des pires, si tu mets en gras une portion de texte et que tu remets en gras cette même portion ou que tu débordes un peu, tu vas te retrouver avec ça : "<b>Mon texte</b> <b>moche</b><b></b>". Avec du WYSIWYM, tu aurais eu ça "<b>Mon texte moche.</b>".

Un second exemple serait de vouloir faire un titre. EN WYSIWYG, tu peux te dire que si tu mets un texte en gras et en grande taille, pof, ça te fait un titre. Sauf que non, ça te fait un gros texte sémantiquement inadéquat dans le document.

Tu pourrais peut-être faire un compromis vu que les personnes dont tu parles ne sont pas douées : un éditeur WISYWYM avec des boutons permettant de transformer des  portions de textes.

L'utilisateur :

• tape un texte,
• en sélectionne une portion,
• clique sur le bouton "mettre en gras",
• voit sa portion s'envelopper de balises markdown (**gras**),
• se dit : "ah, les petites astériques veulent dire que le mot sera en gras, comme c'est rigolo."

Et s'il clique sur le bouton sans avoir fait de sélection, dans la zone de texte apparait **** et le curseur se met entre les 2 paires d'astérisques.

Qu'en penses-tu ?

Tu peux aussi, sans bouton, faire une petite phrase d'aide du genre : "Pour mettre en gras, enveloppes le texte de paires d'astérisques. Tu peux aussi faire de l'*italique*, du _souligné_ ou des #titres. Voir ici(lien) pour en savoir plus sur le markdown".

Tu peux lire ceci, ça devrait t'apporter quelque chose : http://www.blogduwebdesign.com/javascript-ressources/wysiwyg-wysiwym-faisons-le-point/538

-
Edité par Diatomée 18 janvier 2018 à 21:08:39

Merci pour le bout de code en javascript.

Oui effectivement je vois le problème. Je vais réfléchir a ton idée de combiner le markdown avec du WYSIWYG parce-qu'effectivement ça peut les amené à mieux comprendre le principe tout en leur laissant une méthodes "automatique" si jamais ils comprennent pas.

Merci pour ton aide !