WYSIWIG : insert(un)orderedlist

Bonjour à tous,

Je dois réalisé un éditeur wysiwyg, la fenêtre éditable est un div et non une iframe (je n'ai pas le choix du composant que je dois utiliser pour la fenêtre éditable) je dois réalisé cet éditeur principalement pour IE et doit ensuite être fonctionnel pour les autres navigateurs... Et je n'arrive pas a utiliser la commande "insertorderedlist" avec execCommand, il m'insère bien ma liste ordonnée à la base de mon div, mais tout ce que j'écris ensuite est intégré dans le premier élément et je ne peux pas ajouter d'autre éléments a ma liste ou encore sortir de ma liste afin d'en créer une autre plus loin par exemple... Tous les execCommand se font sur le div d'édition.

J'espère que vous pourrez m'aiguiller éventuellement sur d'autres post similaires ou tout autre ressources susceptibles de m'aider... Je suis novice en javascript et malgré mes nombreuses heures de recherche je ne trouve pas encore de solution :/

Merci d'avance !

un bout de code pour se rendre compte éventuellement ? :roll: (ou alors on part dans la grande spéculation... ^^)

Code:

---

<div style="width: 1036px; height: 793px;" id="editor" class="HTMLEditorField" contentEditable="true"></div>

---

Voilà le div que j'utilise, et tous les appels de execCommand sont fait sur document, c'est à dire "document.execCommand(...)", je ne peux pas trop écrire de code tel qu'il est car de 1, le projet est déjà assez volumineux et de 2, je suis stagiaire dans une entreprise je ne peux donc pas sortir le code comme ça... Mais même avec des spéculations je pourrais avancer, car je suis vraiment novice en javascript ce n'est pas mon domaine de base et la taille du projet fait que je suis totalement perdu... (Un framework javascript avec des composants codés en objet :/)

Si tu as d'autres questions j'serais ravi d'y répondre du mieux que je peux mais c'est tout ce que j'peux faire :/

J'ai avancé dans mon exploration, en fait il y a eu une redéfinition de la fonction exécutée lors de l'appuie sur une touche, et maintenant cette fonction ajoute un <br /> à la place de la traditionnelle balise <p> et c'est cette redéfinition qui explose le fonctionnement des listes...

Voici le code de la redéfinition :

Code:

---

1 2 3 4 5 6 7 8 9 10 11

//document.execCommand("2D-position",false,true); this._elt.onkeydown = function(){ if (window.event.keyCode == 13) { var sel = document.selection.createRange(); sel.pasteHTML('<br/>'); sel.collapse(); sel.select(); window.event.returnValue = false; window.event.cancelBubble=true; } }

---

Si quelqu'un pouvais m'aider a remettre le comportement par défaut tout en gardant cette modification de l'insertion du <br> à la place du <p> ça serais génial :/

J'ai avancé dans mon problème, maintenant je peux inserer de nouvelles lignes dans ma liste :), voici le code de la fonction éxécutée par l'appuie sur la touche entrée :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14

if (window.event.keyCode == 13) { var sel = document.selection.createRange(); var par = sel.parentElement(); if (par.valueOf() == "[object HTMLLIElement]"){ var l=par.parentElement; var node=document.createElement("li"); l.appendChild(node); } else sel.pasteHTML('<br/>'); sel.select(); window.event.returnValue = false; window.event.cancelBubble=true; }

---

Mais maintenant j'ai un autre soucis... Mon curseur reste dans le premier li :/ Et je n'arrive pas a le faire changer de balise malgré mes recherches (depuis ce matin) je n'ai encore rien trouvé :/ Dès que je saurais faire ça j'aurais gérer intégralement mon problème de listes :)

J'ai déjà essayé avec des "move" sur la sélection courante mais ça n'a pas exactement le résultat voulu :/

J'espère que l'un d'entre vous a la réponse :/
Merci d'avance !!