Discussion :

[vaneck]

bonjour.
Je cherche a faire un éditeur de texte sur le web qui respecte les balises sémantique. Actuellement , il est possible de faire de la mis-en-page sur des éléments du DOM en contenteditable par la méthode document.execCommand.
Mais le texte devient balisé par du <span> moche, alors que j'ai absolument besoin de vrais balises sémantique : <strong>, <mark>, etc...
Connaissez vous une possibilité pour englober par une balise du texte sélectionné?
Actuellement je dois utiliser le système D , a savoir remplacer par JavaScript toute les mauvaise balises par des balises qui ont du sens (j'aurais pu le faire tout aussi bien en php , mais je préfére que ce soit fait en direct).
Merci de votre aide.

[vaneck]

Bon en fait même comme ça ça ne marche pas; je m'explique:
FIrefox pour les éditeurs de texte prévoit la méthode midas http://www.mozilla.org/editor/midas-spec.html.
Ce n'est pas du tout au point. D'un part ce n'est pas standardisé , editableDocument.execCommand("Bold", false, null); par exemple donne des résultats différent pour chaque navigateur testé.
De plus c'est lourdement buggué. inserthtml qui m'aurais permis de crée mes propres balises marche a moitié sous chrome , et pas du tout sous Firefox.
Je me suis replié donc sur une autre solution:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

sel.getRangeAt(0).surroundContents(el);

Signifiant: entourer la première gamme(getRangeAt(0)) de la sélection(sel) par un balise (contenue dans la variable el).
Cela marche beaucoup mieux et me donne la possibilité de créer mes propres balises.
Cependant çà na marche que si je sélectionne du texte. Par contre je n'arrive pas a préciser qu'a un endroit précis du texte, la suite de ce que j’écrirais sera contenu dans une balise que j'aurais choisis a l'avance.
Avec:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

sel.getRangeAt(0).insertNode(el);

Je peux crée une balise ouvrante et fermante a l'endroit ou j'ai le curseur , mais ce que j’écrirais se trouveras automatiquement derrière le curseur

A partir de la virgule, le texte aurait du se trouver entre ces balise <strong></strong>.

Donc ma question actuelle:
Comment placer le curseur a un endroit précis du texte (entre les dernières balises crées donc) dans un contenteditable (pas un textarea)?
Merci de votre aide, si j'obtiens des réponses satisfaisante je créerais un mini-tuto, pour l'instant introuvable sur le web.

[snake264]

Alors c'est peut être la fatigue de la journée mais je n'ai absolument rien compris à ce que tu cherchais à faire...

Quel rapport y-a-t-il déjà avec le Web sémantique ?

[vaneck]

Apres réflexion , classer ce sujet dans sémantique n'est peut etre pas le plus judicieux.
Il y a quand même un rapport avec la sémantique, puisque les éditeur de texte classique sur le web font surtout de la mis-en-page.
Celui de developpez.com par exemple dispose d'un bouton pour choisir la taille des polices , de leur couleur ou du soulignement , ce qui n'as pas vraiment de sens en tant que tel.
Je veux donc construire un éditeur de texte qui ne dispose QUE de balise sémantique, et accessoirement aider le néophyte a donner facilement du sens a son texte par ses balises (en remplacer la balise souligné par, par exemple un balise de titre <hx>).
Mais effectivement mon problème est surtout javascript.
D'ailleur j'ai avancé, je sens que je suis pas loin de la réponde.
Illustrature:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
var el = document.createElement('strong'); ==>crée une balise pour le DOM
var selection = window.getSelection();
selection.getRangeAt(0).insertNode(el); ==>place cette balise après la sélection sourie
selection.anchorNode.nextSibling.focus();  ==> théoriquement , place le focus sur la nouvelle balise (ce que je cherche a faire). Mais ne marche pas , malgré l'assurance de la doc!

[snake264]

En effet ce n'est pas le bon endroit car pas de rapport avec le Web sémantique

Je verrai ton problème beaucoup mieux dans la partie javascript