Edition BBCode : objet selection

Version imprimable

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:

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:

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 );
	});
}

J'ai essayé d'avancer avec ce tuto mais je n'arrive pas à gérer la sélection. En particulier, quelle que soit la sélection dans l'élément textarea, les propriétés anchorOffset et focusOffset valent 0.
Voici comment j'ai modifié mon code:

Code:

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
26
27
28
29
30
const
	bbCodeBtns	= document.querySelectorAll(".bbcodeBtn")
	,textArea	= document.getElementById("textArea")
	,sel		= document.getSelection()
	;
 
if (bbCodeBtns.length){
	bbCodeBtns.forEach(function(curBtn,index){
		curBtn.addEventListener('click', function(e){
			// with two bbCode-tags (opening and closing) in textArea content
			textArea.focus();
			var content = sel.anchorNode.firstChild.value;
			if(curBtn.dataset.close != null){
				// with no selected text
				console.log(textArea);		// élément textArea
				console.log(sel);		// objet selection
				console.log(content);		// "Lorem ipsum"
				// with no selected text
				if (sel.isCollapsed){
				}
				// with some selected text
				else{
				}
			}
			// with only one tag (opening or closing)
			else{
			}
		}, false );
	});
}

07/05/2022, 22h13
Beginner.

Salut,

Il semble que ces méthodes sur les textarea ne fonctionnent pas sur tous les navigateurs mais il y a d'autres méthodes qui leurs sont spécifiques : selectionStart et selectionEnd.
08/05/2022, 15h58
moimp

Merci, c'est bien ce que je voulais!