Avatar billede htm Nybegynder
26. oktober 2003 - 15:12 Der er 20 kommentarer og
1 løsning

Tilføje tekst / HTML til div

Hej

Jeg sidder og kigger lidt på lidt dhtml med div etc.

Har fundet ud at bruge 
document.getElementById("div").innerText = "tekst " + sel + " tekst";

Det tager og sætter værdien af hele diven lig med de tekster og den markerede tekst.

Hvordan sørger jeg for at jeg kun sætter værdien ind på den markerede plads. Altså så det ikke er alt teksten i div der bliver erstatter men kun det markerede, eller at det bliver tilføjet der hvor markøren står?

Min Div er <div id="div" contenteditable></div>
Avatar billede roenving Novice
26. oktober 2003 - 15:15 #1
Du skal bruge et textRange-objekt !-)
Avatar billede htm Nybegynder
26. oktober 2003 - 15:16 #2
Har du et kodeeksempel? Jeg er stadig lidt grøn i javascript :-)
Avatar billede roenving Novice
26. oktober 2003 - 15:24 #3
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/objects.asp og find TextRange

-- jeg har ikke hoppet så meget ind i dhtml-editoren og dermed også dette objekt, så der kommer sikkert nogen, som har pillet ordentligt i det !-)

-- men helt generelt skulle du kunne:

document.selection.createRange() og så få en textRange ud af det, så skulle du kunne sætte dens .text-property til hvad du vil ...
Avatar billede htm Nybegynder
26. oktober 2003 - 15:38 #4
Hmm lidt nærmere kom jeg da, selvom jeg havde kigget lidt på det createrange.

Min kode:
sel = document.selection.createRange().text;
document.selection.createRange().text = "<b>" + sel + "</b>";

virker fint med ren tekst, dvs. at den indsætter <b>markeret tekst</b> i div'en men ikke som html.

Hvordan får jeg den til at virke som innerHTML?
Endvidere virker det ikke hvis jeg kun har sat markøren, der skal være markeret noget først.
Avatar billede htm Nybegynder
26. oktober 2003 - 15:40 #5
Der er et attribut der hedder htmlText men det virker ikke, giver mig fejlen:
"Objektet understøtter ikke denne handling"

Og som det fremgår af MSDN kan den kun modtage:
Retrieves the HTML source as a valid HTML fragment.
Avatar billede htm Nybegynder
26. oktober 2003 - 15:45 #6
Lige et lille tillægsspørgsmål som jeg opdagede ikke virkede, er det muligt at lave en div contenteditable som også virker i opera?
Avatar billede roenving Novice
26. oktober 2003 - 15:47 #7
Men der er en metode, du kan bruge !-)

TextRange.pasteHTML(sHTMLText)
Avatar billede roenving Novice
26. oktober 2003 - 15:48 #8
-- selvom Opera har gjort meget for at være kompatibel med IE tror jeg ikke du skal regne med at den slags proprietære ting virker i andet end IE !-)
Avatar billede roenving Novice
26. oktober 2003 - 15:51 #9
Så jeg ville:

range = document.selection.createRange();
range.pasteHTML("<b>" + range.htmlText + "</b>");
Avatar billede htm Nybegynder
26. oktober 2003 - 15:54 #10
Hmm jeg sad lige og prøvede lidt frem og tilbage, men kunne ikke få det til at virke - men din virkede fint. ;-)

Er det på nogen måde muligt at lave en crossbrowser wysiwyg-editor? (og ikke med iframes)
Avatar billede roenving Novice
26. oktober 2003 - 15:57 #11
Såvidt jeg ved ikke på nuværende tidspunkt !-)

Mozilla har nu fået en editor-mulighed, men den skulle være væsensforskellig fra IEs DHTML-editing component (som jeg har forstået er et ActiveX-objekt), så det har nok lange udsigter !-)

Men måske når vi når html 6 (og css 4 og javascript 2 ?-)

-- men velbekomme '-)
Avatar billede htm Nybegynder
26. oktober 2003 - 16:01 #12
Hmm - det stiller jo IE ufatteligt stærkt på det område. Men jeg glæder mig  til html 6.0 :-)

Har du nogle links der forklarer lidt om mozillas editor mulighed? og evt. fra hvilken version?

Er det muligt at lave en crossbrowser wysiwyg editor med iframes / ilayers?
Avatar billede roenving Novice
26. oktober 2003 - 16:07 #13
Problemet er at der skal laves en hulens masse codebranching, så jeg har ikke set nogen påstå at man kunne !-)

Men du kan jo kigge på:

http://www.mozilla.org/editor/midasdemo/

og

http://www.bris.ac.uk/is/projects/cms/ttw/ttw.html
Avatar billede htm Nybegynder
26. oktober 2003 - 16:17 #14
Hmm man må nok bare acceptere at det ikke er nemt at lave en crossbrowser editor. Men jeg vil kigge på dine links.

htm takker og giver roenvig god karma :-)
Avatar billede htm Nybegynder
26. oktober 2003 - 16:17 #15
Ups roenving selvfølgelig ;-)
Avatar billede roenving Novice
26. oktober 2003 - 16:22 #16
-- og jeg takker for points ;~}
Avatar billede htm Nybegynder
26. oktober 2003 - 16:29 #17
Et lille sidste spørgsmål:

Burde dette ikke virke i mozilla 1.5?

document.getElementById("div").pasteHTML = "tekst  tekst";

Det virker fint i opera 7.11 og IE 6.0, men i mozilla sker der intet, er det korrekt syntaks?
Avatar billede roenving Novice
26. oktober 2003 - 16:40 #18
pasteHTML er noget, som kun understøttes af IE (og -kloner !-)
Avatar billede roenving Novice
26. oktober 2003 - 16:40 #19
-- men du kan da bruge .innerHTML !-)
Avatar billede htm Nybegynder
26. oktober 2003 - 16:43 #20
Ok mange tak, den virker.

havde ellers forsøgt med innerText men det gav samme resultat som pasteHTML.
Avatar billede roenving Novice
26. oktober 2003 - 16:55 #21
.innerText er også en M$-ting !-)
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