Balise de code dans un éditeur de texte. Résolu

Question

Bonjour à tous, Étant en train de créer mon forum, qui est encore plutôt basique, voir vide, je me suis dit qu'il pourrait être sympas d'insérer divers balises de mises en forme de style dans mon éditeur de texte qui n'était composé que d'un

NHenry · Answer

A ma connaissance, un textarea ne tolère pas la mise en forme, voir plutôt avec une div editable :
https://www.w3schools.com/tags/att_global_contenteditable.asp 
J'interviens principalement en VB6 et VB.NET, avec un peu de C#, mais la modération m'amène souvent sur d'autre langages.
En VB.NET pensez à activer "Option Explicit" et "Option Strict"

jordane45 · Answer

Bonjour,

Tout est expliqué ici :
https://openclassrooms.com/courses/insertion-de-balises-dans-une-zone-de-texte

function insertTag(startTag, endTag, textareaId, tagType) {
        var field  = document.getElementById(textareaId); 
        var scroll = field.scrollTop;
        field.focus();
        
        /* === Partie 1 : on récupère la sélection === */
        if (window.ActiveXObject) {
                var textRange = document.selection.createRange();            
                var currentSelection = textRange.text;
        } else {
                var startSelection   = field.value.substring(0, field.selectionStart);
                var currentSelection = field.value.substring(field.selectionStart, field.selectionEnd);
                var endSelection     = field.value.substring(field.selectionEnd);               
        }
      
        /* === Partie 2 : on analyse le tagType === */
        if (tagType) {
                switch (tagType) {
                        case "lien":
                                // Si c'est un lien

                        break;
                        case "citation":
                                // Si c'est une citation
                        break;
                }
        }

        /* === Partie 3 : on insère le tout === */
        if (window.ActiveXObject) {
                textRange.text = startTag + currentSelection + endTag;
                textRange.moveStart("character", -endTag.length - currentSelection.length);
                textRange.moveEnd("character", -endTag.length);
                textRange.select();     
        } else {
                field.value = startSelection + startTag + currentSelection + endTag + endSelection;
                field.focus();
                field.setSelectionRange(startSelection.length + startTag.length, startSelection.length + startTag.length + currentSelection.length);
        } 
        field.scrollTop = scroll;     
}

Et pour l'associer à un bouton

<input type="button" value="G" onclick="insertTag('<gras>','</gras>','textarea');" />
<textarea id="textarea" cols="150" rows="10">ici tu as du texte .. que tu peux selectionner en parti pour y ajouter les balises ..</textarea>

hcp7kuz · Answer

Justement, lorsque j'essaie sur un

éditable, en modifiant l'id des boutons de style, les balises de mise en forme ne se mettent pas sur le texte sélectionné, ni nul part d'ailleurs. Mon code : Style : Script JS : Code HTML :

Div éditable (ne fontionne pas)

Encore merci pour ton aide.

hcp7kuz · Answer

Je crois que j'ai trouvé !

Code CSS :

#div_editeur {
    width: 500px;
    height: 200px;
    border: 1px solid black;
    padding: 5px;
    overflow: auto;
}

Code JS :

function getSelected() {
    if (window.getSelection) {
        return window.getSelection();
    }
    else if (document.getSelection) {
        return document.getSelection();
    }
    else {
        var selection = document.selection && document.selection.createRange();
        if (selection.text) {
            return selection.text;
        }
         return false;
    }
    return false;
}

function pasteHtmlAtCaret(html) {
    var sel, range;
    if (window.getSelection) {
        // IE9 and non-IE
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();

            // Range.createContextualFragment() would be useful here but is
            // non-standard and not supported in all browsers (IE9, for one)
            var el = document.createElement("div");
            el.innerHTML = html;
            var frag = document.createDocumentFragment(), node, lastNode;
            while ( (node = el.firstChild) ) {
                lastNode = frag.appendChild(node);
            }
            range.insertNode(frag);
            
            // Preserve the selection
            if (lastNode) {
                range = range.cloneRange();
                range.setStartAfter(lastNode);
                range.collapse(true);
                sel.removeAllRanges();
                sel.addRange(range);
            }
        }
    } else if (document.selection && document.selection.type != "Control") {
        // IE < 9
        document.selection.createRange().pasteHTML(html);
    }
}

function balise(startTag, endTag, divID, tagType) {
 switch (tagType) {
  case "lien": //si c'est un lien
      var adresse_lien = prompt("Entrez l'adresse du lien :");
         document.getElementById(divID).focus();
         pasteHtmlAtCaret("<a href=" + adresse_lien + " rel="nofollow noopener noreferrer" target="_blank">" + getSelected() + endTag);
   break;
  default: //sinon :
         document.getElementById(divID).focus();
         pasteHtmlAtCaret(startTag + getSelected() + endTag);
   break;
 } 
}

Code HTML :

<input type="button" value="<>" onclick="balise('[code]','[/code]','div_editeur');" />
<input type="button" value="G" style="font-weight: bold;" onclick="balise('<b>','</b>','div_editeur');" />
<input type="button" value="I" style="font-style: italic;" onclick="balise('<em>','</em>','div_editeur');" />
<input type="button" value="S" style="text-decoration: underline;" onclick="balise('<u>','</u>','div_editeur');" />
<input type="button" value="Lien" style="text-decoration: underline; color: blue;" onclick="balise('<a>','</a>','div_editeur', 'lien');" /><br />
<div id="div_editeur" contenteditable="true">Div éditable</div>

Sujet résolu : merci pour votre aide ^^

Div éditable

Sujet résolu : merci pour votre aide ^^

Balise de code dans un éditeur de texte.

4 réponses

Newsletters