[Javascript] Dirigere il puntatore tra tag html creati

**wartpro** · 01-12-2011, 17:20

Sera a tutti,

mi sto creando un editor di testo/html da zero. Non sono riuscito a trovare info riguardo il puntatore lampeggiante di una textarea.

Avendo una funzione di questo tipo:

codice:

pre.onclick = function() {
	txtarea.value += cont_pre;
	txtarea.focus();
}

La quale inserisce all'interno della textarea i tag "<pre></pre>" e dà il focus all'editor (se non ce l'ha già)...ecco vorrei sapere come posizionare il puntatore all'interno dei tag.

Perchè attualmente il puntatore va alla fine, cioè dopo il tag </pre>.

C'è qualcuno che può darmi qualche info?

Grazie in anticipo.

**wartpro** · 01-12-2011, 23:34

Per chi visiterà questro thread in futuro..

..la soluzione l'ho trovata qui: [ http://forum.html.it/forum/showthrea...5#post11902285 ]

Ah! Forum.html.it!!

Ad ogni modo, posto pezzo di codice completo (non tutto, solo una minima parte), che riguarda un editor di testo html che si può implementare, come sto facendo io, magari sul proprio sito perchè si ha la testa dura di non voler usare un cms e perchè ci piace taaanto..ma taaanto reinventare la ruota.

codice:

var pre = // ..questo è il pulsante che verrà premuto per..
var cont_pre = // ..generare una stringa '<pre></pre>', presente in questa variabile, in..
var txtarea = // ..una textarea presente nella pagina.

pre.onclick = function() {
	txtarea.value += cont_pre;
	var f = txtarea.value.length;
		f = f-6;
		if (txtarea.setSelectionRange) {
			txtarea.focus();
			txtarea.setSelectionRange(f,f);
		}

Spero possa esservi utile. Lo script in questione, anche all'aggiunta di più "<pre>" dà sempre il focus in mezzo ai tag.

Ciauz

EDIT: il controllo "txtarea.setSelectionRange" si può anche rimuovere...se operate solo voi. Riciauz

**carlomarx** · 02-12-2011, 01:15

Da' uno sguardo anche qua…:

codice:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>MDC Example</title>
<script type="text/javascript">
	function insertMetachars(sStartTag, sEndTag) {
		var bDouble = arguments.length > 1, oMsgInput = document.myForm.myTxtArea, nSelStart = oMsgInput.selectionStart, nSelEnd = oMsgInput.selectionEnd, sOldText = oMsgInput.value;
		oMsgInput.value = sOldText.substring(0, nSelStart) + (bDouble ? sStartTag + sOldText.substring(nSelStart, nSelEnd) + sEndTag : sStartTag) + sOldText.substring(nSelEnd);
		oMsgInput.setSelectionRange(bDouble || nSelStart === nSelEnd ? nSelStart + sStartTag.length : nSelStart, (bDouble ? nSelEnd : nSelStart) + sStartTag.length);
		oMsgInput.focus();
	}
</script>
<style type="text/css">
	.intLink {
		cursor: pointer;
		text-decoration: underline;
		color: #0000ff;
	}
</style>
</head>

<body>

<form name="myForm">


[<span class="intLink" onclick="insertMetachars('&lt;strong&gt;','&lt;\/strong&gt;');">Bold</span> | <span class="intLink" onclick="insertMetachars('&lt;em&gt;','&lt;\/em&gt;');">Italic</span> | <span class="intLink" onclick="var newURL=prompt('Enter the full URL for the link');if(newURL){insertMetachars('&lt;a href=\u0022'+newURL+'\u0022&gt;','&lt;\/a&gt;');}else{document.myForm.myTxtArea.focus();}">URL</span> | <span class="intLink" onclick="insertMetachars('\n&lt;code&gt;\n','\n&lt;\/code&gt;\n');">code</span> | <span class="intLink" onclick="insertMetachars(' :-)');">smile</span> | etc. etc.]</p>


<textarea rows="10" cols="50" name="myTxtArea">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut facilisis, arcu vitae adipiscing placerat, nisl lectus accumsan nisi, vitae iaculis sem neque vel lectus. Praesent tristique commodo lorem quis fringilla. Sed ac tellus eros. Sed consectetur eleifend felis vitae luctus. Praesent sagittis, est eget bibendum tincidunt, ligula diam tincidunt augue, a fermentum odio velit eget mi. Phasellus mattis, elit id fringilla semper, orci magna cursus ligula, non venenatis lacus augue sit amet dui. Pellentesque lacinia odio id nisi pulvinar commodo tempus at odio. Ut consectetur eros porttitor nunc mollis ultrices. Aenean porttitor, purus sollicitudin viverra auctor, neque erat blandit sapien, sit amet tincidunt massa mi ac nibh. Proin nibh sem, bibendum ut placerat nec, cursus et lacus. Phasellus vel augue turpis. Nunc eu mauris eu leo blandit mollis interdum eget lorem. </textarea></p>
</form>

</body>
</html>

**wartpro** · 02-12-2011, 01:20

Mi piace. Il prompt per gli url l'avevo pensato pure io

Grazie per la condivisione, sarà utile ai posteri!

**wartpro** · 02-12-2011, 12:52

Mi sono affidato a questa funzione da te suggerita perchè rischiavo di creare mille "HTMLElement.onclick = function () .." .

Solo una cosa però riguardo questo script: non riesco a capire qual'è l'elemento che determina l'inserimento dei tag nello stesso punto in cui si trova il puntatore lampeggiante

Sapresti delucidarmi?

Grazie in anticipo.

**carlomarx** · 02-12-2011, 14:31

codice:

		oMsgInput.value = sOldText.substring(0, nSelStart) + (bDouble ? sStartTag + sOldText.substring(nSelStart, nSelEnd) + sEndTag : sStartTag) + sOldText.substring(nSelEnd);

**wartpro** · 02-12-2011, 14:59

Eheheh si si l'avevo capito che era questa la stringa. Intendevo il meccanismo.

Grazie lo stesso.

Discussione: [Javascript] Dirigere il puntatore tra tag html creati

Strumenti discussione

Ricerca discussione

Visualizza

[Javascript] Dirigere il puntatore tra tag html creati

Permessi di invio