klistra in text

[Rest man Klaymen]

Tjena!

 

Skrivit ett litet script för att klistra in text i en textruta, ungefär som kod, citat och log-knapparna funkar på eforum.

 

Funkar som en dröm, men bara i explorer. Har försökt fixa det så att det går i FF också, men det vill sig inte. Antar att det bara är nåt litet fix.

Här är hela scriptet

 

[log]<script language="JavaScript" type="text/javascript">

<!--

states = new Array(0,0,0,0,0,0);

texts0 = new Array('','','','

','[img=','','','','

',']',']Link');

 

var colorstate = 0;

 

function getState(type){

return states[type];

}

 

function setState(type,state){

states[type] = state;

}

 

function getText(type,state){

if (state == 0){

setState(type,1);

return texts0[type]; }

else if (state == 1){

setState(type,0);

return texts1[type]; }

}

 

function addStyle(type,state){

var textarea = document.write.message;

textarea.focus();

 

selection = document.selection.createRange().text;

 

if (selection == ''){

textarea.value += getText(type,state); }

else {

if (type == 5){

document.selection.createRange().text = '' + selection + ''; }

else {

document.selection.createRange().text = getText(type,0) + selection + getText(type,1); } }

}

 

function addColor(state){

 

var textarea = document.write.message;

textarea.focus();

 

var color = document.write.color.value;

if (color != 'nil'){

selection = document.selection.createRange().text;

 

if (selection == ''){

 

if (state == 0){

textarea.value += '';

colorstate = 1;

}

else if (color != 'nil'){

textarea.value += '';

colorstate = 1;

} }

else {

document.selection.createRange().text = '' + selection + ''; } }

 

else {

textarea.value += '';

colorstate = 0; }

}

 

-->

</script>[/log]

 

så här ser knapparna ut:

 

[log]

<input type="button" name="bold" value="Bold" onClick="addStyle(0,getState(0))">

<input type="button" name="italic" value="Italic" onClick="addStyle(1,getState(1))">

<input type="button" name="underline" value="Underline" onClick="addStyle(2,getState(2))">

<input type="button" name="quote" value="Quote" onClick="addStyle(3,getState(3))">

<input type="button" name="img" value="Img" onClick="addStyle(4,getState(4))">

<input type="button" name="url" value="Url" onClick="addStyle(5,getState(5))">

 

<select name="color" onChange="addColor(colorstate)">

<option value="nil">No color</option>

<option value="000000">black</option>

<option value="FFFFFF">white</option>

<option value="FF0000">red</option>

<option value="00FF00">green</option>

<option value="0000FF">blue</option>

<option value="00FFFF">cyan</option>

<option value="FF00FF">magenta</option>

<option value="FFFF00">yellow</option>

 

</select>

[/log]

 

 

/ RMK

Jobbiga_färger.

 

[Rest man Klaymen]

bytte ut

 

document.write.message

 

till

 

document.getElementById('message')

 

och så satte jag till en id-tagg i textarean. Men det funkar fortfarande bara i IE

 

/ RMK

Jobbiga_färger.

 

[Anjuna Moon]

I Mozilla kan du inte använda selection.CreateRange utan får använda följande metoder:

 

Hämta start- och slutindex för markerad text:

i1=oDinTextArea.selectionStart;
i2=oDinTextArea.selectionEnd;

 

Hämta markerad text:

oDinTextArea.value.substr(i1,i2-i1);

 

För att göra ersättningen får du sedan även hämta texten före och efter markering och sedan konkatenera ihop den slutliga texten som skall visas i textarean.

 

[Rest man Klaymen]

"value +=" funkar inte i mozilla alltså?

 

 

/ RMK

Jobbiga_färger.

 

[Anjuna Moon]

"value +=" funkar inte i mozilla alltså?

Jo, visst funkar det, men det sa jag ju inget om.

 

[Rest man Klaymen]

för det är ju inte bara funktionen som klistrar in taggar runt markeringen som inte fungerar, det fungerar heller inte att bara lägga in text i textarean. för dom selection.createRange() inte fungerar så borde ju variabeln selection bli tom, och första if-satsen under borde ju köras. Eller?

 

/ RMK

Jobbiga_färger.

 

[Anjuna Moon]

Du får kontrollera först om läsaren stödjer document.selection. Ändra till:

function addStyle(type,state){
   var textarea = document.getElementById('message');
   textarea.focus();
   selection='';
   if (document.selection) {
       selection = document.selection.createRange().text;
   }
   if (selection == ''){
       textarea.value += getText(type,state); 
   } else {
       if (document.selection) {
           if (type == 5){
               document.selection.createRange().text = '[url=' + selection + ']' + selection + '[/url]'; 
           } else {
               document.selection.createRange().text = getText(type,0) + selection + getText(type,1); 
           } 
       }
   }
}

 

Efter det får du förstås göra de alternativa sektioner som FF kräver

 

[Rest man Klaymen]

OK, men funkar selectionStart och substr() i IE också, så jag slipper göra en browsercheck?

 

/ RMK

Jobbiga_färger.

 

[Anjuna Moon]

OK, men funkar selectionStart och substr() i IE också

Nä, men du behöver inte göra någon specifik browsercheck. Det räcker med att du använder if (document.selection) för att avgöra vilken metod du skall använda. Det finns tyvärr alltid tillfällen då du måste skapa separata kodstycken för olika läsare.

 

EDIT: Jag menar att selectionStart nog inte fungerar men subst är vanlig javascript och fungerar överallt såklart.

[inlägget ändrat 2007-02-07 19:24:12 av Anjuna Moon]

[Rest man Klaymen]

Sådär, det blev lite trix, men nu fungerar det både i IE och FF! Tack för all hjälp anjuna, hjälpsam som alltid!

 

/ RMK

Jobbiga_färger.