[javascript] Inserire testo formattato da funzione in posizione del cursore

**amphioxus** · 23-04-2012, 16:17

salve a tutti,
ho un form dove permetto di formattare il testo in corsivo grassetto o sottolineato attraverso prompt.
il problema è che la funzione che avevo metteva il termine formattato alla fine del contenuto della textarea. ho girato in giro e ho trovato una funzione che mi permette di insere il testo nella posizione del cursore. ora non restava che unire le due funzioni ed era fatta. solo che mi inserisce una cosa del tipo
bla blaundefined.

io non sono pratico di js però capisco cosa significhi indefinito.
dove l'inghippo?
il codice della funzione di inserimento termini dove è il cursore è compatibile con i vari browser? ho letto di questo problema
ecco il codice

codice:

<script type="text/javascript">

<!--
function AddToTextarea(TextareaID, TextToAdd)
{
    var MyTextarea = document.getElementById(TextareaID);
    if (document.all)
    {
        MyTextarea.focus();
        var MyRange = document.selection.createRange();
        MyRange.colapse;
        MyRange.text = TextToAdd;
    }
    else if (MyTextarea.selectionEnd)
    {
        var MyLength = MyTextarea.textLength;
        var StartSelection = MyTextarea.selectionStart;
        var EndSelection = MyTextarea.selectionEnd;
        MyTextarea.value = MyTextarea.value.substring(0, StartSelection) + TextToAdd + MyTextarea.value.substring(EndSelection, MyLength);
    }
    else
    {
        MyTextarea.value += TextToAdd;
    }
}


function bold() { 
var L = prompt("Inserisci parola da mettere in grassetto","");
if (L != "" || null) {document.FORM2.commento.value+= '' + L + ''}
}
function italic() { 
var L = prompt("Inserisci parola da mettere in grassetto","");
if (L != "" || null) {document.FORM2.commento.value+= '' + L + ''}
}
function underline() { 
var L = prompt("Inserisci parola da mettere in grassetto","");
if (L != "" || null) {document.FORM2.commento.value+= '<u>' + L + '</u>'}
}
</script>

NEL FORM inserisco questo codice

codice:

<input type="button" name="bold" value="B" onclick="AddToTextarea('commento', bold())">

ripeto potrei aver scritto male il richiamo della funzione ma non sono pratico. suggerimenti?

**carlomarx** · 23-04-2012, 16:49

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>

**amphioxus** · 23-04-2012, 17:19

ciao ti chiedo scusa non avevo letto il tuo suggerimento e nel frattempo alla fine ho sviluppato cosi la funzione. non è il massimo dell'estetico e il codice non sarà perfetto ma funziona

codice:

				<input type=\"button\" name=\"bold\" value=\"B\" onclick=\"AddToTextarea('commento','bold')\"> 
				<input type=\"button\" name=\"italic\" value=\"I\" onclick=\"AddToTextarea('commento','italic')\"> 
				<input type=\"button\" name=\"underline\" value=\"U\" onclick=\"AddToTextarea('commento','underline')\">

questi i 3 button

la funzione

codice:

function AddToTextarea(TextareaID, Ntype)
{	
	if(Ntype == 'bold'){
	var L = prompt("Inserisci parola da mettere in grassetto","");
	if (L != "" || null) {TextToAdd='' + L + ''}
	}
	if(Ntype == 'italic'){
	var L = prompt("Inserisci parola da mettere in corsivo","");
	if (L != "" || null) {TextToAdd='' + L + ''}
	}
	if(Ntype == 'underline'){
	var L = prompt("Inserisci parola da mettere sottolineato","");
	if (L != "" || null) {TextToAdd='<u>' + L + '</u>'}
	}
    var MyTextarea = document.getElementById(TextareaID);
    if (document.all)
    {
        MyTextarea.focus();
        var MyRange = document.selection.createRange();
        MyRange.colapse;
        MyRange.text = TextToAdd;
    }
    else if (MyTextarea.selectionEnd)
    {
        var MyLength = MyTextarea.textLength;
        var StartSelection = MyTextarea.selectionStart;
        var EndSelection = MyTextarea.selectionEnd;
        MyTextarea.value = MyTextarea.value.substring(0, StartSelection) + TextToAdd + MyTextarea.value.substring(EndSelection, MyLength);
    }
    else
    {
        MyTextarea.value += TextToAdd;
    }
}

**amphioxus** · 23-04-2012, 18:59

ho generalizzato lo script in questo modo

codice:

<script type="text/javascript">

<!--
function AddToTextarea(TextareaID,TextToAdd,Titolo,TypeText)
{	
	if(TypeText !=""){
	var L = prompt(Titolo,"");
	if (L != "" || null) {TextToAdd= '<' + TypeText + '>' + L + '</' + TypeText + '>'}
	}
    var MyTextarea = document.getElementById(TextareaID);
    if (document.all)
    {
        MyTextarea.focus();
        var MyRange = document.selection.createRange();
        MyRange.colapse;
        MyRange.text = TextToAdd;
    }
    else if (MyTextarea.selectionEnd)
    {
        var MyLength = MyTextarea.textLength;
        var StartSelection = MyTextarea.selectionStart;
        var EndSelection = MyTextarea.selectionEnd;
        MyTextarea.value = MyTextarea.value.substring(0, StartSelection) + TextToAdd + MyTextarea.value.substring(EndSelection, MyLength);
    }
    else
    {
        MyTextarea.value += TextToAdd;
    }
}

per cui se ho una faccina da inserire farò cosi

codice:

[img]../loghi/smile_01.gif[/img]

domanda: è corretto lasciare alcune cose vuote come sopra? ci ho messo gli apici e basta.
se ho invece un testo da formattare farò cosi

codice:

<input type="button" name="bold" value="B" onclick="AddToTextarea('commento','','Inserisci il testo da fare in grassetto','strong')">

cosa ne pensate?

Discussione: [javascript] Inserire testo formattato da funzione in posizione del cursore

Strumenti discussione

Ricerca discussione

Visualizza

[javascript] Inserire testo formattato da funzione in posizione del cursore

Permessi di invio