Editeur JavaScript en WysiWyg

Récupérer la sélection du wywiwyg

   var selection_wysiwig = window.getSelection && window.getSelection();
   if (selection_wysiwig && selection_wysiwig.rangeCount > 0) {
           var data_selection = selection_wysiwig.getRangeAt(0);
   }else {  alert('Absence de sélection ');
           return('Absence de sélection '); 
   }

voir ici : uncaught indexsizeerror failed to execute getrangeat on selection 0

Manipuler le code HTML(5)

modification du document via le DOM

<blockquote>
    <p id="myP">Ceci est un paragraphe !</p>
</blockquote>

var paragraph = document.getElementById('myP');
var blockquote = paragraph.parentNode;

nodeType et nodeName servent à vérifier le type d'un nœud et le nom d'un nœud.

Suite Dynamisez vos sites web avec JavaScript !

Accès au premier et au dernier enfant d'un noeud

<div>
    <p id="myP">Du texte, <a>un lien</a> et aussi<strong>une portion en gras</strong></p>
</div>

<script>
      var paragraph = document.getElementById('myP');
      var first = paragraph.firstChild;alert(first.nodeName.toLowerCase()); -> nom du nœud #text

   firstElementChild ; ->  renvoi le premier élément HTML soit <a>
      var last  = paragraph.lastChild; alert(last.nodeName.toLowerCase());  (gras)

        lastElementChild;  -> renvoi le dernier élément HTML <strong>

Récupérer le texte en gras

   alert(last.firstChild.data); // le texte en gras est le premier enfant du nœud <strong> qui lui est le dernier enfant du paragraphe. Ok ?

childNodes retourne un tableau contenant la liste des enfants d'un élément

 var paragraph = document.getElementById('myP');
 var children  = paragraph.childNodes;

 for (var i = 0, c = children.length; i < c; i++) {
     if (children[i].nodeType === 1) { // C'est un élément HTML
                alert(children[i].firstChild.data);
      } else { // C'est certainement un nœud textuel
                alert(children[i].data);
       }
 }
//nextSibling et previousSibling  permettent d'accéder au nœud suivant et au précédent.

Les attributs firstElementChild, lastElementChild, nextElementSibling et previousElementSibling ne retournent que des éléments HTML et permettent donc d'ignorer les nœuds textuels.

NOTA La variable newLink contient en réalité une référence vers l'élément <a> qui a été créé. newLink ne contient pas l'élément, il contient une adresse qui pointe vers ce fameux <a>. Une fois que l'élément HTML est inséré dans la page, on peut y accéder de nombreuses autres façons, comme avec getElementById(). Quand on accède à un élément via getElementById(), on le fait aussi au moyen d'une référence

Cloner un élément

Pour cloner un élément : cloneNode(). Cette méthode requiert un paramètre booléen ( true ou false) : si vous désirez cloner le nœud avec (true) ou sans (false) ses enfants et ses différents attributs.

exemple : on crée un élément <hr />, et on en veut un deuxième, donc on clone le premier :

// On va cloner un élément créé :
var hr1 = document.createElement('hr');
var hr2 = hr1.cloneNode(false); // Il n'a pas d'enfants…

// Ici, on clone un élément existant :
var paragraph1 = document.getElementById('myP');
var paragraph2 = paragraph1.cloneNode(true);

// Et attention, l'élément est cloné, mais pas « inséré » tant que l'on n'a pas appelé appendChild() :
paragraph1.parentNode.appendChild(paragraph2);

Remplacer un élément par un autre

Pour remplacer un élément par un autre, rien de plus simple, il y a replaceChild(). Cette méthode accepte deux paramètres : le premier est le nouvel élément, et le deuxième est l'élément à remplacer. Tout comme cloneNode(), cette méthode s'utilise sur tous les types de nœuds (éléments, nœuds textuels, etc.).

Dans l'exemple suivant, le contenu textuel (pour rappel, il s'agit du premier enfant de <a>) du lien va être remplacé par un autre. La méthode replaceChild() est exécutée sur l'élément <a>, c'est-à-dire le nœud parent du nœud à remplacer.

    <div>   <p id="myP">Un peu de texte <a>et un lien</a></p>    </div>

    <script>
        var link = document.querySelector('a');
        var newLabel = document.createTextNode('et un hyperlien');

        link.replaceChild(newLabel, link.firstChild);

Supprimer un élément

Pour insérer un élément, on utilise appendChild(), et pour en supprimer un, on utilise removeChild(). Cette méthode prend en paramètre le nœud enfant à retirer. Si on se calque sur le code HTML de l'exemple précédent, le script ressemble à ceci :

var link = document.querySelector('a');

link.parentNode.removeChild(link);

À noter que la méthode removeChild() retourne l'élément supprimé, ce qui veut dire qu'il est parfaitement possible de supprimer un élément HTML pour ensuite le réintégrer où on le souhaite dans le DOM :

var link = document.querySelector('a');

var oldLink = link.parentNode.removeChild(link); // On supprime l'élément et on le garde en stock

document.body.appendChild(oldLink); // On réintègre ensuite l'élément supprimé où et quand on veut
 

etc...

function creerDIV(){ //exemple de création d'une balise div dynamique!

            for (i=0;i<10;i++){

                        var MonDiv=document.createElement('DIV'); //création virtuelle de la balise div

                        MonDiv.setAttribute('name', 'name_myDIV'); //attribut name

                        MonDiv.setAttribute('id', 'id_myDIV'+i); //attribut id

                        MonDiv.className = 'format_myDIV'; //doit être défini dans un style css

                        MonDiv.innerHTML="Blablabla  " +i; //affecte un contenu à la balise div

                        MonDiv.contentEditable = true ; //autorise la saisie,

                        MonDiv.onclick=function(){

                                   alert("essai"+i);

                                   alert(this.id);

                        } //affectation un évènement click à la balise

                        document.body.appendChild(MonDiv); //ajoute la div sur la page web

            }

}

</script>

window.getSelection() :

envoie un objet selection représentant le ou les objets sélectionnés.

contenteditable="true"

true ou  rien : indique que l'élément est éditable

false : indique que l'élément ne peut pas être édité

Récupérer la valeur de l'élément édité :propriété innerHTML = contenu de l'élément HTML.

var contenu = document.getElementById('paragraphe _editable ').innerHTML;