27. april 2003 - 10:34
Der er
65 kommentarer og 1 løsning
Klik, kopier, sæt ind knap osv..
Jeg har en side hvor man kan indsende nyheder.
Jeg vil nu gerne have lavet sådan at der er en værktøjslinie ovenover tekst-feltet, ala den værktøjslinie der findes i Word.
Jeg vil gerne have følgende funktioner:
Klip, Kopier, Sæt ind, Fed, Kursiv, Understregning, opstilling med punkttegn, opstilling med tal eller bogstaver, link.
Se evt. linien her:
http://www.demaweb.dk/vaerktoj.png Jeg håber der er nogen der kan hjælpe mig!?
Annonceindlæg tema
Offentlig digitalisering
Fra effektivisering til digital suverænitet. Hvordan skaber det offentlige en digital fremtid med AI, sikkerhed og kontrol i centrum?
Slettet bruger
27. april 2003 - 10:53
#2
27. april 2003 - 10:58
#3
Super, phoenixv... Smider du ikke lige et svar? Må jeg godt bruge den kode på min side, eller hva!?
27. april 2003 - 11:03
#4
Et meget simpelt alternativ til phoenixv's udmærkede editor <html> <head> <script> function initFrame() { frames.idContent.document.body.style.border = "1px solid"; frames.idContent.document.designMode = "on"; } </script> </head> <body> <a href="#" onclick="frames.idContent.focus();frames.idContent.document.execCommand('cut');">klip</a> <a href="#" onclick="frames.idContent.focus();frames.idContent.document.execCommand('copy');">kopier</a> <a href="#" onclick="frames.idContent.focus();frames.idContent.document.execCommand('paste');">sæt ind</a> <a href="#" onclick="frames.idContent.focus();frames.idContent.document.execCommand('bold');">fed</a> <a href="#" onclick="frames.idContent.focus();frames.idContent.document.execCommand('italic');">italic</a> <a href="#" onclick="frames.idContent.focus();frames.idContent.document.execCommand('underline');">underline</a> <a href="#" onclick="frames.idContent.focus();frames.idContent.document.execCommand('insertunorderedlist');">bulllist</a> <a href="#" onclick="frames.idContent.focus();frames.idContent.document.execCommand('insertorderedlist');">numlist</a> <br> <iframe id="idContent" name="idContent" onload="initFrame();" frameborder="no"></iframe> </body> </html>
27. april 2003 - 11:04
#5
Slettet bruger
27. april 2003 - 11:09
#6
Svar
Slettet bruger
27. april 2003 - 11:09
#7
Du må bruge "mini wysiwyg" til alle formål, og WYS-II-WYG må du bruge gratis til ikkekommercielle opgaver.
27. april 2003 - 11:11
#8
pelkjaer >> Hvordan får jeg så værdien ud af feltet, så jeg f.eks. kan uploade værdien til min database (jeg bruger PHP/mySQL)?
27. april 2003 - 11:15
#9
Du kan starte med at tilføje flg. til init funktionen frames.idContent.document.body.innerHTML = idContentTemp.innerHTML; samt flg. i html'en <div id="idContentTemp" style="display:none;"></div> og når du så gemmer kan du i din "save()" funktion smide indholdet fra editoren i et formfelt - fx. sådan document.f.t.value = frames.idContent.document.body.innerHTML;
27. april 2003 - 11:17
#10
Hov glemte lige noget - i idContentTemp har du så dit database kald således at du kan hente tekst ind i editoren. asp: <div id="idContentTemp" style="display:none;"><%=(rs("dbfeltnavn"))%></div>
27. april 2003 - 11:25
#11
Den forstår jeg intet af.. Kan jeg få dig til at lave en færdig kode i .PHP, hvor man på siden kan trykke send, og når man trykker send så printes værdien af feltet på skærmen?
27. april 2003 - 11:28
#12
Nej, fordi jeg kan ikke kode php, men jeg kan godt lave et eks med en form, når den submittes må du selv kunne opdatere i db. 3 min.
27. april 2003 - 11:39
#14
<html> <head> <script> function initFrame() { frames.idContent.document.body.innerHTML = idContentTemp.innerHTML; frames.idContent.document.body.style.border = "1px solid"; frames.idContent.document.designMode = "on"; } function doSave() { document.f.t.value = frames.idContent.document.body.innerHTML; //Her smides editor indhold i input felt if (confirm("Du er ved at gemme dokumentet.\nEr du sikker på at du er færdig med at redigere?")) { return true; } else { return false; } document.f.submit();//Her må du opdatere record med php } </script> </head> <body> <a href="#" onclick="doSave();">gem</a> <a href="#" onclick="frames.idContent.focus();frames.idContent.document.execCommand('cut');">klip</a> <a href="#" onclick="frames.idContent.focus();frames.idContent.document.execCommand('copy');">kopier</a> <a href="#" onclick="frames.idContent.focus();frames.idContent.document.execCommand('paste');">sæt ind</a> <a href="#" onclick="frames.idContent.focus();frames.idContent.document.execCommand('bold');">fed</a> <a href="#" onclick="frames.idContent.focus();frames.idContent.document.execCommand('italic');">italic</a> <a href="#" onclick="frames.idContent.focus();frames.idContent.document.execCommand('underline');">underline</a> <a href="#" onclick="frames.idContent.focus();frames.idContent.document.execCommand('insertunorderedlist');">bulllist</a> <a href="#" onclick="frames.idContent.focus();frames.idContent.document.execCommand('insertorderedlist');">numlist</a> <br><br> <iframe id="idContent" name="idContent" onload="initFrame();" frameborder="no"></iframe> <div id="idContentTemp" style="display:none;">indsæt php db kald her</div> <form name="f" method="post" action="" style="display:inline;"> <input type="hidden" name="t"> </form> </body> </html> En kommentar til: <div id="idContentTemp" style="display:none;">indsæt php db kald her</div> I denne div laver du et php kald, således at du kan redigere i en eksistrende tekst. Bortset fra det, burde det være nok blot at update din record ved form submit nu.
27. april 2003 - 11:46
#15
pelkjaer >> Kan jeg ik bare overføre værdien af feltet til en string, f.eks $tekst?
27. april 2003 - 11:47
#16
Det eneste du skal gøre er at gemme indholdet fra <input type="hidden" name="t"> i din database - thats' it.
Slettet bruger
27. april 2003 - 11:47
#17
dennism>> Download hele ZIP-filen og pak det ud i samme mappe.
27. april 2003 - 11:57
#18
phoenixv >> Det har jeg gjort.. Jeg hentede wysiwyg.zip!
27. april 2003 - 12:02
#19
pelkjaer >> Nu er det næsten som jeg gerne vil have det! Min kode er nu: <html> <head> <META NAME="Generator" CONTENT="Stone's WebWriter 3.5"> <script> function initFrame() { frames.idContent.document.body.innerHTML = idContentTemp.innerHTML; frames.idContent.document.body.style.border = "1px solid"; frames.idContent.document.designMode = "on"; } </script> </head> <body> <a href="#" onclick="frames.idContent.focus();frames.idContent.document.execCommand('cut');">klip</a> <a href="#" onclick="frames.idContent.focus();frames.idContent.document.execCommand('copy');">kopier</a> <a href="#" onclick="frames.idContent.focus();frames.idContent.document.execCommand('paste');">sæt ind</a> <a href="#" onclick="frames.idContent.focus();frames.idContent.document.execCommand('bold');">fed</a> <a href="#" onclick="frames.idContent.focus();frames.idContent.document.execCommand('italic');">italic</a> <a href="#" onclick="frames.idContent.focus();frames.idContent.document.execCommand('underline');">underline</a> <a href="#" onclick="frames.idContent.focus();frames.idContent.document.execCommand('insertunorderedlist');">bulllist</a> <a href="#" onclick="frames.idContent.focus();frames.idContent.document.execCommand('insertorderedlist');">numlist</a> <br><br> <iframe id="idContent" name="idContent" onload="initFrame();" frameborder="no"></iframe> <div id="idContentTemp" style="display:none;"></div> <br><br> <form name="forumlar" method="post" action="side.html" style="display:inline;"> <input type="hidden" name="tekst"> <INPUT TYPE="submit" value="Send"> </form> </body> </html> Jeg skal nu have lavet sådan, at når jeg trykker "send", så bliver værdien af feltet sendt til det skjulte felt "tekst".. Kan du klare det?
27. april 2003 - 12:04
#20
Findes der forresten andre "execCommand"-commandoer?
27. april 2003 - 12:09
#21
<ole> Kik på det allerførste link, du fik af =maddog= ;o) /mvh </bole>
27. april 2003 - 12:24
#22
Sådan her <html> <head> <script> function initFrame() { frames.idContent.document.body.innerHTML = idContentTemp.innerHTML; frames.idContent.document.body.style.border = "1px solid"; frames.idContent.document.designMode = "on"; } function updateIt(hvad) { document.formular.tekst.value = hvad; } </script> </head> <body> <a href="#" onclick="frames.idContent.focus();frames.idContent.document.execCommand('cut');">klip</a> <a href="#" onclick="frames.idContent.focus();frames.idContent.document.execCommand('copy');">kopier</a> <a href="#" onclick="frames.idContent.focus();frames.idContent.document.execCommand('paste');">sæt ind</a> <a href="#" onclick="frames.idContent.focus();frames.idContent.document.execCommand('bold');">fed</a> <a href="#" onclick="frames.idContent.focus();frames.idContent.document.execCommand('italic');">italic</a> <a href="#" onclick="frames.idContent.focus();frames.idContent.document.execCommand('underline');">underline</a> <a href="#" onclick="frames.idContent.focus();frames.idContent.document.execCommand('insertunorderedlist');">bulllist</a> <a href="#" onclick="frames.idContent.focus();frames.idContent.document.execCommand('insertorderedlist');">numlist</a> <br><br> <iframe id="idContent" name="idContent" onload="initFrame();" onblur="updateIt(frames.idContent.document.body.innerHTML);" frameborder="no"></iframe> <div id="idContentTemp" style="display:none;"></div> <br><br> <form name="formular" method="post" action="side.html" style="display:inline;"> <input type="hidden" name="tekst"> <input type="submit" value="Send"> </form> </body> </html>
27. april 2003 - 12:32
#23
Super.. Nu behynder det sku at ligne noget jeg kan bruge :) Men jeg har lige et ekstra spm.: Kan jeg lave sådan man kun kan skrive men én skrifttype og én skriftstørrelse i feltet? For som det er nu, så kan jeg skrive en tekst i word f.eks. med størrelse 12, og derefter kopiere den ind i feltet.. Jeg vil så gerne have sådan at den ændrer alt skriften til "Verdana" str. 10!.. Kan dette laves, eller må jeg leve med dette?
27. april 2003 - 12:35
#24
Din init funktion kan udvides til function initFrame() { frames.idContent.document.body.innerHTML = idContentTemp.innerHTML; frames.idContent.document.body.style.border = "1px solid"; frames.idContent.document.body.style.fontFamily = "verdana"; frames.idContent.document.body.style.fontSize = "10px"; frames.idContent.document.designMode = "on"; } Men du må strippe det du paster ind, da du stadig kan paste en fx tahoma 18 px ind.
27. april 2003 - 12:36
#25
Hvordan kan jeg sætte style="padding:0px" i iframen, sådan at teksten går helt ud til kanten?
27. april 2003 - 12:37
#26
frames.idContent.document.body.style.margin = "0px";
27. april 2003 - 12:40
#27
Jeg har lige afsat nogle flere point, fordi du virkelig har hjulpet mig meget.. Men, jeg har lige spm. mere... Hvordan kan det være at afstanden mellem hver linie er meget stor? Hvordan kan den laves normal? Er der et sted hvor jeg kan se alle de "frames.idContent.document.body.style" der kan laves?
27. april 2003 - 12:42
#28
Det er fordu du trykker "enter" og dermed laver <p> tags. Holde du samtidig "shift" inde laver du <br> istedet. Vil du hellere have <br> only?
27. april 2003 - 12:43
#29
Ja, det vil jeg hellere!
27. april 2003 - 12:44
#30
Så udskift med function initFrame() { frames.idContent.document.body.innerHTML = idContentTemp.innerHTML; frames.idContent.document.body.style.border = "1px solid"; frames.idContent.document.body.style.fontFamily = "verdana"; frames.idContent.document.body.style.fontSize = "10px"; frames.idContent.document.designMode = "on"; frames.idContent.document.onkeydown = function() { if (frames.idContent.event.keyCode == 13) { selRange = frames.idContent.document.selection.createRange(); selRange.pasteHTML('<br>'); selRange.select(); return false; } } }
27. april 2003 - 12:47
#31
Super.. Jeg håber det er iorden at jeg bliver ved med at spørge, for jeg har nemlig et problem mere: Jeg skal også have lavet en side hvor man kan redigere teksten.. Jeg prøvede derfor: <div id="idContentTemp" style="display:none;"><? echo"$_POST[tekst]"; ?></div> Hvor $_POST[tekst] indeholder den tekst jeg lige har skrevet.. Men teksten bliver ikke skrevet i boksen, hvorfor?
27. april 2003 - 12:48
#32
Don't know da jeg ikke kan php :o) prøv med <div id="idContentTemp" style="display:none;">hej</div> så virker det da?
27. april 2003 - 12:51
#33
Ja, det virker godt nok! Mærkeligt... Og så lige noget lidt andet.. Hvordan kan jeg angive en border på en iframe? Jeg har forsøgt med dette, men det virker ikke helt: <iframe id="idContent" name="idContent" onload="initFrame();" onblur="updateIt(frames.idContent.document.body.innerHTML);" style="height:350px; width:450px; border: 1px #000000 solid"></iframe>
27. april 2003 - 12:51
#34
Smider du ikke lige et svar, pelkjaer?
27. april 2003 - 12:53
#35
Du angiver borderen her frames.idContent.document.body.style.border = "1px solid"; Det andet må være din php det er galt med.
Slettet bruger
27. april 2003 - 13:01
#36
Hvis du stadig er interesseret, så har jeg uploadet nogle ZIP-filer, der virker nu! :)
27. april 2003 - 13:13
#38
Well, bulllist samt numlist funktionerne er her noget ubrugelige pga. den nu laver <br> ved enter. Det problem har phoenxiv's editor ikke, ved ikke om han har stylet <p> tags istedet.
27. april 2003 - 14:23
#39
phoenixv >> Hvordan løser du det problem med bulllist og numlist? Du skal nok få 50 point (i et andet spm.) hvis du vil være så venlig at svare på det!
27. april 2003 - 17:38
#40
Jeg har nu også fundet en lille fejl mere. Jeg har en side hvor man kan redigere nyheder, og på den side henter jeg værdien fra databasen til variablen $row[tekst]. I scripet skriver jeg så: <div id="idContentTemp" style="display:none;"><? echo"$row[tekst]"; ?></div> Det virker så også fint nok. Teksten står i feltet. Men hvis jeg trykker send, så bliver den værdi ikke gem i den skjulte iframe! Jeg går udfra at det er fordi jeg har "sat" teksten ind i iframen, fremfor at skrive den deri!.. Hvordan retter jeg denne fejl? Du skal nok få nogle flere point, pelkjaer... Jeg har virkelig brug for din hjælp!
27. april 2003 - 18:36
#41
Well, funktionen på body her onblur="updateIt() burde nå at kopiere indholdet ned i dit hiddenfelt inden det gemmer, men det er da muligt at du skal lave en save funktion der submitter (og kopierer indhold i hiddenfelt) som i de aller første eksempler her i tråden istedet for en decideret submit knap.
27. april 2003 - 18:37
#42
Kan du nøjes med en bulllist funktion og altså ikke en nummereret liste har jeg også en umiddelbar løsning.
27. april 2003 - 20:24
#43
Det er lige med med den nummererede version, så!.. Hvad er løsningen? Jeg forstår ikke noget af det med den savefunktion du snakker om..
Slettet bruger
28. april 2003 - 14:19
#44
Løsningen på <br>-problemet er at style p-tags som list-style-item, altså: p { display: list-style-item; }
29. april 2003 - 14:58
#45
Jeg har nu indsat den style, og mit script er: <script> function initFrame() { frames.idContent.document.body.innerHTML = idContentTemp.innerHTML; frames.idContent.document.body.style.border = "1px solid"; frames.idContent.document.body.style.fontFamily = "verdana,arial"; frames.idContent.document.body.style.fontSize = "8pt"; frames.idContent.document.body.style.margin = "1px"; frames.idContent.document.designMode = "on"; } function updateIt(hvad) { document.formular.tekst.value = hvad; } </script> Men det fungerer ikke! Hvad mangler jeg? pelkjaer >> Må jeg be om løsningen på det med "insertunorderedlist"?
Slettet bruger
29. april 2003 - 15:09
#46
Hvor har du indsat stylen?
Slettet bruger
29. april 2003 - 15:12
#47
Jeg tror i øvrigt næppe, at det med <br> virker i en iframe. Mit råd er at bruge en div, selvom det udelukker IE5.
29. april 2003 - 15:12
#48
I min head-sektion: <style type="text/css"> body, td { font-size: 8pt; font-family: verdana,arial;} a:link { color: #00659C; text-decoration: none; } a:visited { color: #00659C; text-decoration: none; } a:active { color: #00659C; text-decoration: none; } a:hover { color: #ff0000; text-decoration: underline; } p { display: list-style-item; } </style> Er det ikke godt nok?
Slettet bruger
29. april 2003 - 15:18
#49
Nej, det skal jo sættes ind i iframen. Altså skal default-siden i iframen have den style i head, og du skal huske at tage den med over, når du skriver til databasen.
Slettet bruger
29. april 2003 - 15:19
#50
Derfor synes jeg ikke mere, at iframe er smartere eller nemmere end div.
29. april 2003 - 15:22
#51
phoenixv >> Kan jeg let omskrive min kode til div? Skal jeg bare skrive "class=p" i koden til min iframe, eller hvordan?
29. april 2003 - 16:22
#52
Sådan.. Se disse sider:
http://www.demaweb.dk/test/tekstfelt.php http://www.demaweb.dk/test/tekstfelt_.php Her kan I se hvad jeg har lavet...
De to fejl der er nu, er:
1.: For stort linieskifte
2.: Hvis man f.eks. skriver en tekst i feltet og derefter trykker "Test" to gange i træk, så bliver teksten fjernet!
Jeg håber I vil hjælpe mig med at få rettet disse fejl!?
Jeg giver meget gerne 50 point pr. løsning (altså 2 ialt) :)
29. april 2003 - 18:04
#53
Flg. virker noget anderledes, men det fungerer faktisk ganske godt. //Indsæt bullet list function doBullList(color) { frames.idContent.document.body.focus(); makeSelRange(); selRang.pasteHTML(' <span style="color:' + color + ';">•</span> '); selRang.select(); } og onclick="doBullList('#000000');"
29. april 2003 - 18:54
#54
Oki.. Ser lige om jeg få det til at virke. HVad med 2'eren!? Har du en løsning på den?
Slettet bruger
29. april 2003 - 20:25
#56
Nej, du kan ikke let skrive det om til div. Du skal lægge et dokument ind i iframen, vha src="din_side.html". På "din_side.html" skal stylen så være.
29. april 2003 - 20:47
#57
Du mener altså at jeg skal lave noget ala dette: <iframe id="idContent" name="idContent" onload="initFrame();" onblur="updateIt(frames.idContent.document.body.innerHTML);" style="height:350px; width:450px;" align=center scr="tekstfelt.html"></iframe> <div id="idContentTemp" style="display:none;"><? echo"$_POST[tekst]"; ?></div> Er du sikker på at det vil virke, når nu jeg så både har en iframe og en div!?
Slettet bruger
29. april 2003 - 20:50
#58
Nu er jeg ikke helt sikker på, hvad du mener mere. Hvem taler du til? :)
29. april 2003 - 20:53
#59
phoenixv >> Sorry.. Jeg er ik så kanon til dette.. Men sagde du ikke at jeg skulle lægge et dokument ind i min iframe? Og det er så det jeg har forsøgt med koden før!
29. april 2003 - 20:56
#60
Jeg har lige forsøgt.. Vil du se? Det ser nemlig ikke ud til at virke!
Slettet bruger
29. april 2003 - 20:58
#61
Du skriver også scr i stedet for src. Men jeg garanterer ikke, det virker. Som sagt er det noget tricky med iframes.
29. april 2003 - 21:42
#63
*LOL* var selRang; function makeSelRange() { selRang = frames.idContent.document.selection.createRange(); } -den mangler du :=)
29. april 2003 - 22:12
#65
fordi jeg ikke har lavet en save funktion der virker :o) prøv denne function doSave() { document.formular.tekst.value = frames.idContent.document.body.innerHTML; if (confirm("Du er ved at gemme dokumentet.\nEr du sikker på at du er færdig med at redigere?")) { document.formular.submit(); } else { return false; } document.formular.submit(); }
Kan jeg ikke lave sådan at den, inden siden submites, så bliver alt skriften i feltet ændret til "Verdana, arial" 8pt?
Vi tilbyder markedets bedste kurser inden for webudvikling