Bonjour,
J'essaie de créer un document d'édition d'une page BBCode dans un textarea.
J'ai trouvé une foule de trucs mais je bloque au niveau de l'édition et de la sélection.
Je voudrais faire quelque chose qui ressemble à ce forum.
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23 <h2>Rédaction d'une page d'accueil personnalisée</h2> <div id="bbcodeBtns"> <button type="button" class="bbcodeBtn" data-open="[h2]" data-close="[/h2]">Titre</button> <!-- Remplacer par liste d'options de <h1> à h6> --> <button type="button" class="bbcodeBtn" data-open="[p]" data-close="[/p]">Paragraphe</button> <button type="button" class="bbcodeBtn" data-open="[br]" data-close=null>Retour à la ligne</button> <button type="button" class="bbcodeBtn" data-open="" data-close="">Italique</button> <button type="button" class="bbcodeBtn" data-open="" data-close="">Gras</button> <button type="button" class="bbcodeBtn" data-open="[ul]" data-close="[/ul]">Liste</button> <button type="button" class="bbcodeBtn" data-open="[ol]" data-close="[/ol]">Liste ordonnée</button> <button type="button" class="bbcodeBtn" data-open="[li]" data-close="[/li]">Elément de liste</button> <button type="button" class="bbcodeBtn" data-open="" data-close="">Lien</button> <button type="button" class="bbcodeBtn" data-open="[img=url_image alt=alt_image]" data-close=null>Image</button> <!-- ajouter le choix des couleurs --> </div> <form> <p><textarea id="textArea" name="textArea" rows="15" cols="100">Lorem ipsum</textarea></p> <button type="submit" name="save">Enregistrer</button> <button type="reset" name="reset">Effacer ce texte</button> <button type="submit" name="del" title="Supprime la page déjà enregistrée">Supprimer la page</button> </form> <script type="module" src="../js/bbCode.js"></script>
Code js : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25 const bbCodeBtns = document.querySelectorAll(".bbcodeBtn") ,textArea = document.getElementById("textArea") ; if (bbCodeBtns.length){ bbCodeBtns.forEach(function(curBtn,index){ curBtn.addEventListener('click', function(e){ // with two tags bbCode (opening and closing) in textContent alert(curBtn.dataset.open); alert(curBtn.dataset.close); var selObj = document.getSelection(); var selRange = selObj.getRangeAt(0); console.log(selObj); //console.log(selRange); // Provoque une erreur if(curBtn.dataset.close != null){ // Condition block 'if' without selected text // Condition block 'if' with a selected text } else{ // with only an opening tag } }, false ); }); }
Partager