Partage
  • Partager sur Facebook
  • Partager sur Twitter

[JS] Editeur WYSIWYG, problème de curseur

    8 février 2006 à 15:17:16

    Bonjour à tous :)

    Je suis entrain de coder un editeur WYSIWYG pour etude-facile.be. J'ai presque fini mais il me reste un problème à résoudre.

    Pour les citations, voici ma fonction :

                    function quote ()
                            {
                            //Ici ca vient d'une fonction exterieur (celle de l'initialisation), voilà pourquoi c'est un code un peu "répété" avec le if.
                            if(IE)  edoc = window.frames['editeur'].document;
                            if(MOZ) edoc = document.getElementById('editeur').contentDocument;
                            //----
                            if(IE)  ewin = window.frames['editeur'];
                            if(MOZ) ewin = document.getElementById('editeur').contentWindow;
                           
                            var contenu ="<p style=\"margin-top:0;\"><div style=\"margin:0;margin-left:5px;margin-right:5px;\"><div style=\"font-family:Arial,,serif;height:20px;padding:3px;font-size: 0.9em;background: #E4EAF2 url(../images/quote.gif) no-repeat right;font-weight:bold;margin:0;border-top:1px dotted black;border-left:4px solid #8394b2;border-right:1px dotted black;\">Citation de <i>Nom</i></div><div style=\"padding:3px;margin:0;background:#fafcfe;border-left:4px solid #8394b2;border-right:1px dotted black;border-bottom:1px dotted black;\">Citation</div></div></p><br />";
                                    edoc.body.innerHTML = contenu;
                                    ewin.focus();

                            }


    Mais lorsque j'insere ceci, avec edoc.body.innerHTML, il m'écrase evidemment tout le contenu de mon "textarea". Je fais alors :
    edoc.body.innerHTML += contenu;
    Mais alors il me met la citation à la fin...

    Je voudrais pouvoir inserer du HTML dans "edoc" à l'endroit où se trouve le curseur.
    Pouvez-vous m'aider ?

    PS : J'y arrive avec les autres (gras, souligné, listes, ...) car j'utilise une fonction de javascript mais qui est fort limité. J'ai donc créé cette fonction pour les citations mais...

    Merci :)
    • Partager sur Facebook
    • Partager sur Twitter
      9 février 2006 à 19:24:35

      Bonjour,
      J'ai fais une fonction qui fait ça (en adaptant un peu) :
      function insert(id, avant, apres=null, inner=null){
        var champ = document.getElementById(id);
        var valeur = champ.innerHTML;
       
        if(getSelection){
          champ.focus();
          var deb_sel = valeur.substr(0, champ.selectionStart);
          var end_sel = valeur.substr(champ.selectionEnd, valeur.length);
          var sel = getSelection();
          valeur = deb_sel + avant + sel + inner + apres + end_sel;
          champ.innerHTML = valeur;
        }else if(champ.createTextRange){
          champ.focus();
          var sel = document.selection.createRange().text;
          document.selection.createRange().text = avant + sel + inner + apres;
        }
        champ.focus();
      }

      Je sais pas si ça marche mais tu peux toujours tester :)
      Utilise la comme ça :

      var contenu ="<p style=\"margin-top:0;\"><div style=\"margin:0;margin-left:5px;margin-right:5px;\"><div style=\"font-family:Arial,,serif;height:20px;padding:3px;font-size: 0.9em;background: #E4EAF2 url(../images/quote.gif) no-repeat right;font-weight:bold;margin:0;border-top:1px dotted black;border-left:4px solid #8394b2;border-right:1px dotted black;\">Citation de <i>Nom</i></div><div style=\"padding:3px;margin:0;background:#fafcfe;border-left:4px solid #8394b2;border-right:1px dotted black;border-bottom:1px dotted black;\">Citation</div></div></p><br />";

      insert('editeur', null, contenu);




      Bisous, Nyu
      • Partager sur Facebook
      • Partager sur Twitter
        10 février 2006 à 0:55:35

        ?? salut, ce topic peut t'il aussi te servir ?
        <lien url="http://www.siteduzero.com/forum-83-18009-142887.html#r142887 ">js scroll textarea</lien>

        je suis curieux de ton editeur WYSIWYG car j'avais commencé un truc ,
        d'abord a partir d'un textarea vers un iframe, puis vers un div ,
        puis je suis passer a une page en frame (pensant pouvoir jouer avec les doctype)
        et j'ai finalement opter pour une popup, ce qui permet de vraiment tester aussi les doctypes,
        ce qui est avantageux c'est que ça permet aussi de tester les javascript en live,
        le lien vers la version popup est dans ma signature, et celui en frame est la :editeur-fmr en frame

        j'avais garder un textarea pour la portion entre body et body ,
        un pour les style et un pour les javascript,
        la version popup a aussi un textarea supplementaire pour les style IE en commentaire conditionnel ...
        ça ne me sert qu'a tester mes bidouilles en live ,
        les fonction pour charger un fichier externe(okay seulement avec IE et firefoxe)
        ainsi que de faire une sauvegarde ou envoie par mail (via php ou mailto) etait prevue mais pas ajouté ...
        je n'ai plus retouché a ce truc depuis novembre , La mise en page et le fonctionnement me semble a revoir de zero et malheureusement ,
        il me semble qu'un truc bien fini (en html et javascript) ne serait utilisable que dans les "gecko" et "internet explorer"
        et seul "internet explorer" permettrais en local de charger un fichier ...
        je ne pense pas m'y remettre de sitot, car en usage personnel je tape a la main dans les textarea et je ne m'en sert jamais pour faire une page complete ,
        en generale juste pour faire mumuse avec le css et de temps a autre avec le javascript ,
        c'est plutot educatif en quelque sorte...

        voila ,
        je serai curieux de voir le truc sur lequel tu travail :)
        histoire de voir comment tu l'organise coté utilisateur,
        parce que le mien ça fait bordelique.
        a plus
        • Partager sur Facebook
        • Partager sur Twitter

        fan de pluxml je suis cuisinier et codeur amateur. Des thèmes pour pluxml ? Oui

          15 février 2006 à 19:16:10

          Dutiona >> Je vais essayer mieux car à mon premier essai ca ne marchait pas.

          gcyrillus >> Va voir tes mp's stp :)
          • Partager sur Facebook
          • Partager sur Twitter

          [JS] Editeur WYSIWYG, problème de curseur

          × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
          × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
          • Editeur
          • Markdown