textarea - inserire tag senza cncellare il testo

**ziogusmo** · 07-10-2004, 18:19

ciao a tutti.

in una pagina ho un form con una textarea.

con divesri input type inserisco i tab di formattazione:

<input type="button" class="botton" value="G" style="font-weight:bold; width:25px;" onclick="javascript:insertnews('')" title="Testo grassetto" />

e il javascript che uso è:

function insertnews(Tag) {
var obj=document.news.testo;
if (document.all) {
obj.focus();
var sel=document.selection;
var rng=sel.createRange();
rng.colapse;
rng.text=Tag;
} else if(obj.selectionEnd){
var lng=obj.textLength
var from=obj.selectionStart
var to=obj.selectionEnd
obj.value=obj.value.substring(0,from)+Tag+obj.valu e.substring(to,lng)
} else obj.value+=Tag;
obj.focus();
}

Lo script mi inserisce correttamente i tag, e poi io scrivo il testo al loro interno. (e fin qui tutto OK).

io vorrei poter inserire la formattazione quando ho già scritto il testo facendo in modo che il testo non si cancelli.

Mi spiego:

Nella textarea ho:
"ciao come va?"
io vorrei avere invece "ciao come va?".
quindi seleziono il testo e clicco sul bottone e ne ovviamente il javascript mi sostituisce al mio testo i tag .

c'è un modo per risolvere la situazione?

ciao

**badaze** · 07-10-2004, 18:30

Prova questo (l'ho fatto parecchi mesi fa...)
Puoi selezionare una parte del testo e cliccare su un pulsante o puoi direttamente cliccare il pulsante e questo ti indica con un * che il tag è aperto.

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<script language="JavaScript" type="text/javascript">
<!--
var stTxt1  = true;
var stTxt2  = true;
var stTxt10 = true;
var stTxt20 = true;

btnStatus        = new Array(true,false);
btnStatus[true]  = '*';
btnStatus[false] = ' ';

bold          = new Array(true,false);
bold[true]    = '';
bold[false]   = '';

italic        = new Array(true,false);
italic[true]  = '';
italic[false] = '';

function Aggiungi(button,textarea,formattazione, status) {

 selectedText = document.selection.createRange().text;
 if (selectedText) {
   document.selection.createRange().text = formattazione[true] + selectedText + formattazione[false];
	 document.selection.empty()
  return status;
 } // if (selectedText)
 
 textarea.value += formattazione[status];
 if (! status) {
  ch = ' ';
  re = /\*/i
 } else {
  ch = '*'; 
  re = / /i
 }
 button.value    =  button.value.replace(re, ch);
 return ! status;
}
//-->
</script>

<title>Untitled</title>
</head>
<body>
<textarea name="tx1" rows="10" cols="50"></textarea>


<input type="button" name="b1" value="   G " onclick="stTxt1=Aggiungi(this,tx1,bold,stTxt1);">
<input type="button" name="b1" value="   I " onclick="stTxt10=Aggiungi(this,tx1,italic,stTxt10);">



<textarea name="tx2" rows="10" cols="50"></textarea>


<input type="button" name="b2" value="   G " onclick="stTxt2=Aggiungi(this,tx2,bold,stTxt2);">
<input type="button" name="b2" value="   I " onclick="stTxt20=Aggiungi(this,tx2,italic,stTxt20);">

</body>
</html>

**ziogusmo** · 07-10-2004, 18:39

ok grazie

lo provo e ti faccio sapere

ciao

**daghighe** · 26-10-2004, 14:47

Caro Badaze,
utilissimo il tuo codice.
grazie.
Ho provato a personalizzarlo secondo le mie esigenze ed a creare due bottoni diversi rispetto a quelli da te indicati; un bottone genera il tag
(e funziona), mentre ho dei problemi con il terzo bottone (righe) che vorrei inserisse nella textarea quanto indicato qui sotto.
Quando clicco sul bottone, nella textarea compare la scritta undefined... :master: da cosa può dipendere ?
devo modificare qualche impostazione che mi sono dimenticato ?
qui sotto ho indicato i valori che ho modificato, sia nel javascript che nei bottoni in html
ATTENDO LUMI....

var stTxt1 = true;
var stTxt2 = true;
var stTxt10 = true;
var stTxt20 = true;

btnStatus = new Array(true,false);
btnStatus[true] = '*';
btnStatus[false] = ' ';

bold = new Array(true,false);
bold[true] = '';
bold[false] = '';

br = new Array(true);
br[true] = '
';
br[false] = '
';

righe = new Array(true);
righe[true] = '

-------------------------------

';
righe[false] = '

-------------------------------

';

-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_

<textarea name="descrizione" cols="40" rows="5" class="inputbox"> </textarea>

<input type="button" name="b1" value="bold" onclick="stTxt1=Aggiungi(this,descrizione,bold,stT xt1);" class="sendbutton">
<input type="button" name="b1" value="
" onclick="stTxt10=Aggiungi(this,descrizione,br,stTx t10);">
<input type="button" name="righe" value="---" onclick="stTxt10=Aggiungi(this,descrizione,righe,s tTxt10);">

**badaze** · 26-10-2004, 17:53

Comunque puoi anche lanciarti nell'edizione wysiwyg !!!!

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<script language="JavaScript" type="text/javascript">
<!--

//----------- Esegue un comando
function doCommand(aStr) {
 document.execCommand(aStr);
 document.getElementById('tx1').focus();
} // function doCommand(aStr)

//----------- Fonction d'insertion du code HTML
function createHTML(htmlCode) {
  var selectedText = document.selection.createRange(); 
  if (selectedText != null) {
   selectedText.pasteHTML(htmlCode);
  } // if (!selectedText)
 document.getElementById('tx1').focus();
 return;
} // createHTML(htmlCode) 
//==============================================================================
//-->
</script>



<title>Untitled</title>
</head>
<body>
<table summary="" width="100%">
<tr>
 <td bgcolor="gray" unselectable="on"></td>
</tr>
<tr>
 <td bgcolor="WHITE">
 <DIV name="comment" ID="tx1" unselectable="off" CONTENTEDITABLE onclick="this.focus();"
   STYLE="height:300px; width:100%;z-index=100;font-family:verdana;font-size:9pt;float:left;float:right;overflow:auto;">
 </DIV>
 </td>
</tr>
<tr>
 <td bgcolor="gray"></td>
</tr>
</table>
<input type="button" name="b1"  unselectable="on" value="G" onclick="doCommand('bold');">
<input type="button" name="b1"  unselectable="on" value="I" onclick="doCommand('italic');">
<input type="button" name="b1"  unselectable="on" value="Righe" onclick="createHTML('

-------------------------------

');"> 

<input type="button" name="b1"  unselectable="on" value="Break" onclick="createHTML('<hr>
');">
<input type="button" name="b1"  unselectable="on" value="html" onclick="alert(tx1.innerHTML);">
<script language="JavaScript" type="text/javascript">
<!--
 document.getElementById('tx1').focus();
//-->
</script>

</body>
</html>

Discussione: textarea - inserire tag senza cncellare il testo

Strumenti discussione

Ricerca discussione

Visualizza

textarea - inserire tag senza cncellare il testo

Permessi di invio