Avatar billede tbm_iceman Nybegynder
28. maj 2002 - 13:24 Der er 12 kommentarer og
2 løsninger

Indsæt text ved TextCursorLocation!

Hej Allesammen....

Jeg har lavet en slags online HTML redigerings side i JavaScript.
Det virker sådant at der er en del knapper, og når du så trykker på dem så indsætter den forskellige html-kode stumper ind i et Textarea i SLUTNINGEN.

Det jeg gerne vil er at indsætte koden der hvor TextCursoren er... har vist hvordan det virker nedenunder og hvordan jeg gerne vil have det til at virke.

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

1. Som det er nu!
Textarea: blah blah blah blah (TextCursorLocation) blah blah blah blah <br>

2. Som jeg gerne vil have det :D
Textarea: blah blah blah blah (TextCursorLocation)<br> blah blah blah blah

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

Er dette muligt???



Avatar billede uffelgaard Nybegynder
28. maj 2002 - 13:34 #1
(lytter med)
Avatar billede ras2000 Nybegynder
28. maj 2002 - 13:48 #2
Jeg tror spørgsmålet er blevet stillet 100 gange, jeg mener ikke der er en løsning på det, uden at lave sit eget textarea. Men prøv at søg de gamle spørgsmål igennem.
Avatar billede nikolajdu Nybegynder
28. maj 2002 - 15:48 #3
Sådan her:

Der er et par muligheder.

<HTML>
    <HEAD>
    <SCRIPT>
    function storeCaret (textEl) {
      if (textEl.createTextRange)
        textEl.caretPos = document.selection.createRange().duplicate();
    }
    function insertAtCaret (textEl, text) {
      if (textEl.createTextRange && textEl.caretPos) {
        var caretPos = textEl.caretPos;
        caretPos.text =
          caretPos.text.charAt(caretPos.text.length - 1) == ' ' ?
            text + ' ' : text;
      }
      else
        textEl.value  = text;
    }
    </SCRIPT>
    </HEAD>
    <BODY>
      <form method="post" action="editor.hmtl" name="f">
<table border="0" cellspacing="0" cellpading="5">
<tr>
  <td>
  <a href="#" onclick="insertAtCaret(document.f.text,'bøh');return false">adsasd</a>
    <input type="button" value="Sig Nikolaj du" onclick="insertAtCaret(this.form.text, 'Sig Nikolaj du')">

  </td>
</tr>
<tr>
  <td colspan="2">
    <textarea rows="2" cols="20" id="text" onSelect="storeCaret(this);" onClick="storeCaret(this);" onKeyup="storeCaret(this);"></textarea>
  </td>
</tr>
</table>
</form>
    </BODY>
    </HTML>


/Nikolaj
Avatar billede =maddog= Nybegynder
28. maj 2002 - 16:46 #4
<form name="f">
<textarea name="t" onfocus="toinsert=true;" onblur="toinsert=false;">
Her er teksten
</textarea>
<input type="button" value"indsæt BR" onbeforeactivate="if (toinsert) {document.selection.createRange().text='<BR>'; return false;}">
</form>
Avatar billede =maddog= Nybegynder
28. maj 2002 - 16:46 #5
value"indsæt BR" --->
value="indsæt BR"
Avatar billede =maddog= Nybegynder
28. maj 2002 - 16:54 #6
mit eksempel gemmer ikke cursor positionen som nicolajdu's gør, men udnytter et vindue (toinsert) til at hindre indsættelse udenfor textarea. kravet er en eventhandler der affyres før focus (onbeforeactivate og onfocusin skulle vist begge opfylde kravet, har kun prøvet denne løsning so far da det virker)
Avatar billede tbm_iceman Nybegynder
28. maj 2002 - 18:23 #7
Nu hvor jeg har jer her....

Begge jeres svar virker, dog foretrækker jeg nikolajdu's da dette er en hel del letterer at indbygge i min nuværende kode, og også den der er flest muligheder med.

Jeg har bare lige et ønsker mere...

Lad os sige at jeg markerer en text, så bliver denne erstattet af det indsatte text.

Er det muligt at lave en options hvor man fx. siger at hvis man har markeret en del af teksten så skal den istedet sætte den indsatte text rundt om den markerede....
Har vist hvordan det virker nedenunder og hvordan jeg gerne vil have det til at virke.

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

1. Som det er nu!
Textarea: blah blah blah blah <u></u> blah

2. Som jeg gerne vil have det
Textarea: blah blah blah blah <u>blah blah blah</u> blah

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

Er det så muligt?
Avatar billede atn Nybegynder
29. maj 2002 - 02:32 #8
Heysa !

Her er et lille eksempel....og man kan lave mange flere muligheder....

Håber du kan bruge det...

Venligst

<ATN/>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>Untitled</title>
    <script language="javascript" type="text/javascript">
    function handle(sInput) {
        selTxt = document.selection.createRange()
        switch (sInput) {
            case "1":
                selTxt.text = '<u>'+ selTxt.text +'</u>';
                break;
            case "2":
                selTxt.text = '<i>'+ selTxt.text +'</i>';
                break;
            case "3":
                selTxt.text = '<b>'+ selTxt.text +'</b>';
                break;
            default:
                break;
        }
    }
    </script>
</head>
<body>
<h2>Edit window</h2>
<textarea id="edit" cols="50" rows="20">
Her er der noget tekst....
</textarea><br>
<input type="button" value="Undeline" onclick="handle('1')" style="width:100px;">&nbsp;
<input type="button" value="Italic" onclick="handle('2')" style="width:100px;">&nbsp;
<input type="button" value="Bold" onclick="handle('3')" style="width:100px;">&nbsp;
</body>
</html>
Avatar billede tbm_iceman Nybegynder
29. maj 2002 - 15:36 #9
thx lige hvad jeg ledte efter.

jeg vil gerne give dig nogle point for det, så jeg deler dem lidt ud imellem dig og nikolajdu.

Håber det er ok, for jeg begge!
Avatar billede nikolajdu Nybegynder
29. maj 2002 - 17:30 #10
hmm skummelt. Hader når jeg ikke får mails i spørgsmål. Har kun fået for det sidte indlæg her.

anyway tak for point :)
Avatar billede =maddog= Nybegynder
29. maj 2002 - 17:36 #11
og fortjente points. hammersmart script.
Avatar billede voller Nybegynder
08. juli 2002 - 16:58 #12
atn: Kan man på en eller anden mystisk måde udvidde dit script, så man ikke behøver at have valgt noget tekst for at sætte noget kode ind?

Det konkrete eksempel: Din kode er jo genial når man vil sætte f.eks. <b></b> om noget tekst, man hvis man nu gerne vil sætte <img src="" width="" height="" border="0" alt="Billede"> ind i sit textarea, så er det jo ikke helt optimalt, at man først skal vælge noget tekst, for at sætte et billede ind. Kan man gøre noget ved det?

Jeg prøvede at rode lidt med nikolajdus kode, men jeg havde problemer med den. Noget med createTextRange var null eller ikke et objekt.
Avatar billede atn Nybegynder
08. juli 2002 - 23:12 #13
Heysa !

Tja....man kan alt....

Her er lidt du kan arbejde lidt videre med....

Håber du kan bruge det... ! :o)

venligst

<ATN/>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>Untitled</title>
    <script language="javascript" type="text/javascript">
    function openImageWin() {
        strHtml  = '<html><title>Img win</title>';
        strHtml += '<body bgcolor="#808080" text=""#ffffff"><center>';
        strHtml += '<form onsubmit="parent.opener.writeImage(this.link.value,this.width.value,this.height.value);self.close();">';
        strHtml += 'Link:<input type="text" name="link" size="10"><br>';
        strHtml += 'Width:<input type="text" name="width" size="4"><br>';
        strHtml += 'Height:<input type="text" name="height" size="4"><br>';
        strHtml += '<input type="submit" value="okay"></form></center></body></html>';
        imgWindow = window.open('','imgWin','top='+Math.round((screen.height/2)-100)+',left='+Math.round((screen.width/2)-65)+',width=200,height=130')
        imgWindow.document.open();
        imgWindow.document.write(strHtml);
        imgWindow.document.close();
       
    }
   
    function writeImage(sS,iW,iH) {
        document.all['edit'].focus();
        imgHtml = '<img src="'+sS+'" width="'+iW+'" height="'+iH+'" border="0">';
        document.selection.createRange().text = imgHtml;
    }
   
    function handle(sInput) {
        selTxt = document.selection.createRange()
        switch (sInput) {
            case "1":
                selTxt.text = '<u>'+ selTxt.text +'</u>';
                break;
            case "2":
                selTxt.text = '<i>'+ selTxt.text +'</i>';
                break;
            case "3":
                selTxt.text = '<b>'+ selTxt.text +'</b>';
                break;
            case "4":
                if (selTxt.text == '') {
                    openImageWin();
                } else {
                    alert('Når du indsætter billede kan du ikke makere tekst !!!');
                }
                break;
            default:
                break;
        }
    }
    </script>
</head>
<body>
<h2>Edit window</h2>
<textarea id="edit" cols="50" rows="20">
Her er der noget tekst....
</textarea><br>
<input type="button" value="Undeline" onclick="handle('1')" style="width:100px;">&nbsp;
<input type="button" value="Italic" onclick="handle('2')" style="width:100px;">&nbsp;
<input type="button" value="Bold" onclick="handle('3')" style="width:100px;">&nbsp;
<input type="button" value="Img" onclick="handle('4')" style="width:100px;">&nbsp;
</body>
</html>
Avatar billede atn Nybegynder
11. juli 2002 - 23:53 #14
ooiu
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester