IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

WYSIWIG : insert(un)orderedlist


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre habitué
    Homme Profil pro
    Inscrit en
    Avril 2012
    Messages
    10
    Détails du profil
    Informations personnelles :
    Sexe : Homme

    Informations forums :
    Inscription : Avril 2012
    Messages : 10
    Par défaut 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 !

  2. #2
    Membre Expert
    Avatar de RomainVALERI
    Homme Profil pro
    POOête
    Inscrit en
    Avril 2008
    Messages
    2 652
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 48
    Localisation : France, Meurthe et Moselle (Lorraine)

    Informations professionnelles :
    Activité : POOête

    Informations forums :
    Inscription : Avril 2008
    Messages : 2 652
    Par défaut
    un bout de code pour se rendre compte éventuellement ? (ou alors on part dans la grande spéculation... ^^)

  3. #3
    Membre habitué
    Homme Profil pro
    Inscrit en
    Avril 2012
    Messages
    10
    Détails du profil
    Informations personnelles :
    Sexe : Homme

    Informations forums :
    Inscription : Avril 2012
    Messages : 10
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <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 :/

  4. #4
    Membre habitué
    Homme Profil pro
    Inscrit en
    Avril 2012
    Messages
    10
    Détails du profil
    Informations personnelles :
    Sexe : Homme

    Informations forums :
    Inscription : Avril 2012
    Messages : 10
    Par défaut
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 :/

  5. #5
    Membre habitué
    Homme Profil pro
    Inscrit en
    Avril 2012
    Messages
    10
    Détails du profil
    Informations personnelles :
    Sexe : Homme

    Informations forums :
    Inscription : Avril 2012
    Messages : 10
    Par défaut
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 !!

Discussions similaires

  1. [DOM] [Xerces] Insertion d'une entité
    Par Traroth dans le forum Format d'échange (XML, JSON...)
    Réponses: 10
    Dernier message: 19/05/2008, 09h28
  2. Bulk insert et caractère accentué
    Par slc dans le forum MS SQL Server
    Réponses: 2
    Dernier message: 22/04/2003, 12h52
  3. probleme d'insertion d'un Float
    Par neness dans le forum Débuter
    Réponses: 3
    Dernier message: 07/01/2003, 12h32
  4. [Postgresql] pb lors d'insertion de données
    Par bob20000 dans le forum Requêtes
    Réponses: 8
    Dernier message: 04/11/2002, 15h33
  5. Réponses: 4
    Dernier message: 28/09/2002, 00h00

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo