Notifikationer

Markér alle som læst Log ud

lademan Novice

24. oktober 2002 - 20:40 Der er 31 kommentarer og
1 løsning

textarea som kan switche imellem html og wysiwyg

Hej.

Er det ikke muligt, at lave et textarea som kan skifte fra "html-mode" til "wysiwyg-mode"?

Hvorfor filan kan jeg ikke får det til at virke??

<textarea name="tekst" cols="56" rows="7"></textarea>
<input type="button" name="button" value="Mode">
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
function transferText1(){
x = document.all.tekst.innerText;
x = x.replace(/\n/g,"<br>");
document.all.tekst.innerHTML = x;
control = 1;
}
document.all.button.onclick = transferText1;
</SCRIPT>

Synes godt om

nikolajdu Nybegynder

24. oktober 2002 - 20:48 #1

Så vidt jeg ved kan man slet ikke køre designmode på et textarea. Kun på <div>

/Nikolaj

Synes godt om

lademan Novice

24. oktober 2002 - 20:50 #2

Damnnn!

Er der ikke en måde, hvorpå man kan switche imellem <textarea> og <div> ?

Synes godt om

lademan Novice

24. oktober 2002 - 20:50 #3

Så man kun ser enten <textarea> eller <div> ?

Synes godt om

nikolajdu Nybegynder

24. oktober 2002 - 20:55 #4

Jeg ved det faktisk ikke, men jeg er 99% sikker på at du ikke kan editere et textarea.

Synes godt om

nikolajdu Nybegynder

24. oktober 2002 - 20:55 #5

Vent på en ekspert på området :)

Synes godt om

Slettet bruger

24. oktober 2002 - 20:56 #6

Du kan ændre deres z-index, så de ligger oven på hinanden.

Synes godt om

Slettet bruger

24. oktober 2002 - 20:57 #7

(det var vist en dårlig formulering)

Du kan give dem hvert deres z-index og så skifte det vha. JavaScript, så når der er valgt designmode har div'en højest z-index, og når der er valgt html-mode har textarea'et højest z-index.

Synes godt om

lademan Novice

24. oktober 2002 - 21:09 #8

Damn! Du kunne ikke lige vise et eksempel??

Synes godt om

Slettet bruger

24. oktober 2002 - 21:15 #9

Jo...

<script>
mode = 0;

function skift() {
document.all.editor.style.zIndex = (mode == 0) ? 2 : 1;
document.all.html.style.zIndex = (mode == 0) ? 1 : 2;
mode = 1 - mode; //Tak til jakoba for denne lille finte!
}
</script>

Din editor:

<div contenteditable id="editor" style="position: absolute; left: 300px; top: 300px; width: 300px; height: 200px; z-index: 2;">

Dit textarea:

<textarea ... id="html" style="position: absolute; left: 300px; top: 300px; width: 300px; height: 200px; z-index: 1;">

Og et link, der skifter mellem de to modes:

<a href="#" onClick="skift(); return false;">Skift</a>

Læg mærke til, at jeg har givet div'en og textarea'et absolutte positioner. Det er fordi, at de jo skal ligge over hinanden!
Elementet med den største z-index ligger højest.

Synes godt om

lademan Novice

24. oktober 2002 - 21:20 #10

<textarea ...

skal jeg bare lave det færdigt?

Synes godt om

Slettet bruger

24. oktober 2002 - 21:23 #11

Ja, men i virkeligheden behøver der nok ikke stå så meget.

Synes godt om

lademan Novice

24. oktober 2002 - 21:24 #12

nope

Synes godt om

lademan Novice

24. oktober 2002 - 21:26 #13

jeg er helt lost!

Synes godt om

Slettet bruger

24. oktober 2002 - 21:26 #14

Lost i hvad? Hvad er det, du ikke forstår?

Synes godt om

lademan Novice

24. oktober 2002 - 21:29 #15

Jeg prøver lige at se på det igen :o)

Synes godt om

lademan Novice

24. oktober 2002 - 21:30 #16

Skulle jeg kunne nøjes med flg kode?

Synes godt om

lademan Novice

24. oktober 2002 - 21:31 #17

<a href="#" onClick="skift(); return false;">Skift</a>

<form name="send">
<textarea id="html" style="position: absolute; left: 300px; top: 300px; width: 300px; height: 200px; z-index: 1;"></textarea>
<div id="editor" style="overflow:visible; position: absolute; left: 300px; top: 300px; width: 300px; height: 200px; z-index: 2;"></div>
</form>

<script>
mode = 0;

function skift() {
document.all.editor.style.zIndex = (mode == 0) ? 2 : 1;
document.all.html.style.zIndex = (mode == 0) ? 1 : 2;
mode = 1 - mode; //Tak til jakoba for denne lille finte!
}
</script>

Synes godt om

Slettet bruger

24. oktober 2002 - 21:35 #18

Jeg har konstrueret et lille eksempel til dig her:

http://phoenixv.h4f.dk/skift.html

Som du kan se, har jeg valgt at gå andre veje.

Synes godt om

lademan Novice

24. oktober 2002 - 21:37 #19

Prøv at skrive
<b>ol</b>

Så burde den jo vise fed skrift?

Synes godt om

lademan Novice

24. oktober 2002 - 21:41 #20

ikke?

Synes godt om

Slettet bruger

24. oktober 2002 - 21:43 #21

Ups, jeg har ikke lavet den til at virke den anden vej rundt (2 sek.)!

Synes godt om

Slettet bruger

24. oktober 2002 - 21:45 #22

Look again...

Synes godt om

lademan Novice

24. oktober 2002 - 21:48 #23

Okaay! Det er supercool!!!!

Synes godt om

lademan Novice

24. oktober 2002 - 21:50 #24

Eneste problem er at der en <body onLoad>

Mit adminsystem kører på samme html som resten af sitet :-/

Synes godt om

lademan Novice

24. oktober 2002 - 22:13 #25

OK. Det hele skulle virke nu. Her er den samlede kode:

<html>
<head>
</head>
<body>

<div id="editor" style="border: 1px solid black; position: absolute; left: 10px; top: 80px; width: 300px; height: 200px; visibility: visible;"></div>
<div id="html" style="position: absolute; left: 10px; top: 80px; visibility: hidden;">

<form name="frm" style="display:inline">
<textarea name="ta" style="width: 300px; height: 200px;"></textarea>
</form>
</div>

<script>
mode = 0;
function skift() {
mode = 1 - mode; //Tak til jakoba for denne lille finte!
if (mode == 0) {
x = document.frm.ta.value;
x = x.replace(/\n/g,"<br>");
document.all.editor.innerHTML = x;
document.all.editor.style.visibility = "visible";
document.all.html.style.visibility = "hidden";
document.all.editor.focus();
}
else if (mode == 1) {
x = document.frm.ta.value;
x = x.replace(/\n/g,"<br>");
document.all.editor.innerHTML = x;
document.all.editor.style.visibility = "hidden";
document.all.html.style.visibility = "visible";
document.frm.ta.focus();
}
}
</script>

<a href="#" onClick="skift(); return false;">Skift</a>
</body>
</html>

Synes godt om

lademan Novice

24. oktober 2002 - 22:14 #26

Måske skulle HTML-editoren være defeault.

Synes godt om

lademan Novice

24. oktober 2002 - 22:14 #27

Kan man bare bytte rundt på visible og hidden de forskellige steder?

Synes godt om

lademan Novice

24. oktober 2002 - 22:17 #28

Næh, det kan man åbenbart ikke uden videre?

Synes godt om

powerbart Nybegynder

24. oktober 2002 - 22:21 #29

1. Fedt at lave noget der kun virker i IE !!
2. (Godt råd) Pas på med at bruge div, det kan gå meget galt.
Eksempel:
Dag 1:
[Tekst][Billed]
[Billed]

Dag x:
Nu går teksten ind over billedet eller omvendt, fordi teksten er blevet ændret, og er nu for lang ....
Og måske "virker" det ikke for folk med en anden strørrelse skærm end din ...

Synes godt om

lademan Novice

24. oktober 2002 - 22:26 #30

Systemet skal KUN bruges til at previewe artikler, og der gør det vel ingen skade :o)

Synes godt om

lademan Novice

24. oktober 2002 - 22:27 #31

Her skulle det endelige opgør/kode være:
<html>
<head>
</head>
<body>

<div id="editor" style="overflow:visible; border: 1px solid black; position: absolute; left: 10px; top: 80px; width: 300px; height: 200px; visibility: hidden;"></div>

<div id="html" style="position: absolute; left: 10px; top: 80px; visibility: visible;">
<form name="frm" style="display:inline">
<textarea name="ta" style="width: 300px; height: 200px;"></textarea>
</form>
</div>

<script>
mode = 0;
function skift() {
mode = 1 - mode; //Tak til jakoba for denne lille finte!
if (mode == 0) {
x = document.frm.ta.value;
x = x.replace(/\n/g,"<br>");
document.all.editor.innerHTML = x;
document.all.editor.style.visibility = "hidden";
document.all.html.style.visibility = "visible";
}
else if (mode == 1) {
x = document.frm.ta.value;
x = x.replace(/\n/g,"<br>");
document.all.editor.innerHTML = x;
document.all.editor.style.visibility = "visible";
document.all.html.style.visibility = "hidden";
}
}
</script>

<a href="#" onClick="skift(); return false;">Skift</a>
</body>
</html>

Synes godt om

Slettet bruger

25. oktober 2002 - 18:23 #32

powerbart>>
1) Det er kun IE, der har implementeret designmode og tilhørende funktioner. Og det er bedre at lave noget til én browser end til ingen overhovedet.
2) Hvis og hvis... Div er en fantastisk ting, og selvfølgelig skal man sikre sig, at det holder i alle opløsninger, men derudover er der absolut ingen fare.

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript	5	27/04/202620:09	21/08/202610:41
Validering af filnavn i formular Af Strawberry i JavaScript	8	14/04/202610:11	20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript	2	03/02/202614:19	04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript	9	18/04/202516:52	22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript	2	14/02/202511:47	27/06/202514:34

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS