Springen naar inhoud

Html + javascript, vraag over rich text editor


  • Log in om te kunnen reageren

#1

p__

    p__


  • >1k berichten
  • 2972 berichten
  • Ervaren gebruiker

Geplaatst op 09 maart 2008 - 10:12

Ik probeer een horizontal rule in een rich text editor te stoppen, maar het lukt me om 1 of andere reden niet. Met bold, italic, list, etc. lukt het allemaal wel.

-------------------------------------------
De button:

<input type="button" value="rule" onclick="java script:doRule()">
-------------------------------------------
De RTE:

<div id="rte" contenteditable="true"></div>
-------------------------------------------
Drie mislukte javascript pogingen:

function doRule(){
   var oRange = document.selection.createRange();
   oRange.pasteHTML("<HR>");
}

function doRule(){
   //dit werkt alleen als je iets selecteert
   var sel = document.selection;
   if (sel!=null) {
	  var rng = sel.createRange();
	  if (rng!=null){
		 rng.pasteHTML("<HR>");
	  }
   }
}

function doRule(){
   var oRange = document.selection.createRange();
   oRange.execCommand('inserthorizontalrule', false, null);
}
-------------------------------------------
Bold code die wel werkt:

function doBold() {
   var oRange = document.selection.createRange();
   oRange.execCommand('Bold');
}
-------------------------------------------
Zoals je ziet had ik de horizontale rule ook geprobeerd in te voegen met pasteHTML(), maar dit werkt alleen als je iets selecteert, niet als je gewoon de muiscursor tussen tekst hebt staan.

Nu heb ik twee vragen:

1.Weet iemand hoe je een horizontale rule kan invoegen?
2.Weet iemand hoe ik ELKE willekeurige html kan invoegen.

Veranderd door p__, 09 maart 2008 - 10:15


Dit forum kan gratis blijven vanwege banners als deze. Door te registeren zal de onderstaande banner overigens verdwijnen.

#2

zpidermen

    zpidermen


  • >1k berichten
  • 1623 berichten
  • Ervaren gebruiker

Geplaatst op 09 maart 2008 - 10:39

1.Weet iemand hoe je een horizontale rule kan invoegen?

oRange.execCommand('InsertHorizontalRule');
Let op HoofdLetters.

2.Weet iemand hoe ik ELKE willekeurige html kan invoegen.

Dat zou met pasteHTML gewoon moeten kunnen. Probeer het eens met enkele quotes (') ipv dubbele quotes (")...

Ik heb een voorbeeldje gevonden waarbij je ook mbv pasteHTML een <HR> kan invoeren:
<html>
<body>
<script language="JavaScript">
function function1() {
	var myRange = document.selection.createRange();
	var m = myRange.pasteHTML('<hr>'); 
} 
</script>
<p>Highlight a part of this text, then click button below</p>
<input id="myB" type="button" value="Click me" onclick="function1();">
</body>
</html>

Veranderd door zpidermen, 09 maart 2008 - 10:48

Beter kaal als geen haar want een kip snurkt

#3

p__

    p__


  • >1k berichten
  • 2972 berichten
  • Ervaren gebruiker

Geplaatst op 09 maart 2008 - 10:52

oRange.execCommand('InsertHorizontalRule');
Let op HoofdLetters.

Net geprobeerd maar dat doet hij ook niet. Het werkt alleen als je een stuk tekst selecteert, want dan kan hij met een selectie werken.

Dat zou met pasteHTML gewoon moeten kunnen. Probeer het eens met enkele quotes (') ipv dubbele quotes (")...

PasteHTML werkt ook alleen als ik iets selecteer. Maar het moet ook werken als mn cursor op een willekeurige plek in de RTE staat, en er dus niks geselecteerd is.


Ik heb een voorbeeldje gevonden waarbij je ook mbv pasteHTML een <HR> kan invoeren:

<html>
<body>
<script language="JavaScript">
function function1() {
	var myRange = document.selection.createRange();
	var m = myRange.pasteHTML('<hr>'); 
} 
</script>
<p>Highlight a part of this text, then click button below</p>
<input id="myB" type="button" value="Click me" onclick="function1();">
</body>
</html>

Die functie is hetzelfde als mn tweede poging hierboven. Volgens mij werkt dat alleen als je een iframe als RTE gebruikt. Probleem zit hem in die "document.selection", want er is geen selectie als je cursor gewoon in het tekstvlak staat.

#4

p__

    p__


  • >1k berichten
  • 2972 berichten
  • Ervaren gebruiker

Geplaatst op 09 maart 2008 - 11:03

Ik kan ook de innerHTML bewerken:

function doRule(){
   document.getElementById('rte').innerHTML += "<hr>";
}

Maar, dit voegt de <hr> altijd toe aan het eind van het tekstvlak. Dus de <hr> komt niet op de plek waar je cursor stond. Als het mogelijk is om de karakter-positie van je cursor op te halen, dan zou ik de <hr> daar kunnen invoegen, maar ik weet niet hoe je die positie ophaalt.

#5

zpidermen

    zpidermen


  • >1k berichten
  • 1623 berichten
  • Ervaren gebruiker

Geplaatst op 09 maart 2008 - 11:58

Maar, dit voegt de <hr> altijd toe aan het eind van het tekstvlak. Dus de <hr> komt niet op de plek waar je cursor stond. Als het mogelijk is om de karakter-positie van je cursor op te halen, dan zou ik de <hr> daar kunnen invoegen, maar ik weet niet hoe je die positie ophaalt.

Volgens mij kan dat met event.clientX / event.clientY, maar ik heb nu even geen tijd om dat helemaal uit te zoeken. Misschien heb je hier wat aan.

Veranderd door zpidermen, 09 maart 2008 - 12:02

Beter kaal als geen haar want een kip snurkt

#6

p__

    p__


  • >1k berichten
  • 2972 berichten
  • Ervaren gebruiker

Geplaatst op 09 maart 2008 - 12:15

Ja dat zijn de X, Y coordinaten, maar die hebben hier geen nut want ik heb de karakter-positie nodig. Met behulp van de karakter positie kan ik text invoegen, maar via de X, Y coordinaten kan ik geen text invoegen.

Dus als je deze text hebt:

"abcd|ef"

En de muiscursor staat achter de "d", dan wil ik het nummer (de positie) van de "d" weten in de string (in dit geval is dat 3). Daarna kan ik de innerHTML opknippen mbv die positie, hier de <hr> tussenvoegen, en vervolgens de innerHTML weer samenvoegen. Zo krijg ik de <hr> op de juiste plek.

Veranderd door p__, 09 maart 2008 - 12:16


#7

zpidermen

    zpidermen


  • >1k berichten
  • 1623 berichten
  • Ervaren gebruiker

Geplaatst op 09 maart 2008 - 12:24

Waarom wil je eigenlijk op die plek een horizontale lijn?
Beter kaal als geen haar want een kip snurkt

#8

p__

    p__


  • >1k berichten
  • 2972 berichten
  • Ervaren gebruiker

Geplaatst op 09 maart 2008 - 12:27

Ik heb net nog een keer dit geprobeerd:

function doRule(){
   var oRange = document.selection.createRange();
   oRange.execCommand('InsertHorizontalRule', false, null);
}

En dat doet hij wel. Dus het lag toch aan de hoofdletters van de horizontalrule zoals de geniale zpidermen zei... had het al eerder geprobeerd maar toen zeker iets foutgetypt.

Maar... ik wil nog steeds weten hoe ik elke willekeurige html op de cursorpositie kan invoegen, dan kan ik mn RTE makkelijk uitbreiden met andere opties.

Waarom wil je eigenlijk op die plek een horizontale lijn?

Het moet op elke plek kunnen, net zoals je op dit forum op elke plek een smiley kan invoegen.

#9

zpidermen

    zpidermen


  • >1k berichten
  • 1623 berichten
  • Ervaren gebruiker

Geplaatst op 09 maart 2008 - 12:36

Maar... ik wil nog steeds weten hoe ik elke willekeurige html op de cursorpositie kan invoegen, dan kan ik mn RTE makkelijk uitbreiden met andere opties.

Waarom wil je een RTE maken als er al goeie RTE's bestaan?

Het moet op elke plek kunnen, net zoals je op dit forum op elke plek een smiley kan invoegen.

Probeer dit of dit eens (ik heb het verder niet getest).
Beter kaal als geen haar want een kip snurkt

#10

p__

    p__


  • >1k berichten
  • 2972 berichten
  • Ervaren gebruiker

Geplaatst op 09 maart 2008 - 12:45

Waarom wil je een RTE maken als er al goeie RTE's bestaan?

Goeie RTEs zijn veel te uitgebreid moeilijk aan te passen aan specifieke eisen. Als ik bijv. wil dat een imagebutton alleen images kan invoegen die in de database staan, moet ik in de bron javascript duiken. Ik heb minder controle erover dus. Vaak werken ze ook met iframes, en bij degenen die ik gezien had kon ik niet css styles van buitenaf daarop loslaten. Bij een div gaat dat heel simpel.

Probeer dit of dit eens (ik heb het verder niet getest).

Zal er naar kijken.

Veranderd door p__, 09 maart 2008 - 12:47


#11

p__

    p__


  • >1k berichten
  • 2972 berichten
  • Ervaren gebruiker

Geplaatst op 09 maart 2008 - 13:48

Ik kom er net achter dat al mn voorbeelden uit mn openingspost het gewoon wel doen, ook inserthorizontalrule zonder hoofdletters. Ik denk dat dat komt omdat ik hier thuis IE7 gebruik, en op mn werk IE6. Dus bij IE6 gaat alles waarschijnlijk nog steeds mis.

#12

zpidermen

    zpidermen


  • >1k berichten
  • 1623 berichten
  • Ervaren gebruiker

Geplaatst op 09 maart 2008 - 13:54

Ik kom er net achter dat al mn voorbeelden uit mn openingspost het gewoon wel doen, ook inserthorizontalrule zonder hoofdletters. Ik denk dat dat komt omdat ik hier thuis IE7 gebruik, en op mn werk IE6. Dus bij IE6 gaat alles waarschijnlijk nog steeds mis.

Dan heb ik goed nieuws, want IE8 gaat zich als het goed is veel meer aan allerlei standaarden houden dan voorgaande versies.
Beter kaal als geen haar want een kip snurkt

#13

Ger

    Ger


  • >5k berichten
  • 16444 berichten
  • Technicus

Geplaatst op 09 maart 2008 - 14:12

Dan heb ik goed nieuws, want IE8 gaat zich als het goed is veel meer aan allerlei standaarden houden dan voorgaande versies.

Eh, nee. IE 8 krijgt wel zogenaamde "super standards", maar die staat standaard uit. Websites zullen moeten worden voorzien van een meta-tag om de browser in super standards mode te krijgen, anders zal het grotendeels vergelijkbaar zijn met IE7. IE8 haalt in de super standards mode weliswaar de Acid2-test, maar omdat die dus standaard uitstaat, wordt die dus niet behaald.

Slotsom: er komt alleen maar meer werk voor webdesigners om alles in de gangbare browsers werkzaam te krijgen.

Overigens is het met JS sowieso een ramp om alles in elke browser te laten functioneren. Dat komt door de ontwikkeling van JS, verschillende browserontwikkelaars waren min of meer gelijktijdig bezig om dynamische mogelijkheden in te bouwen, wat uiteindelijk samengesmolten is tot het JS wat we nu kennen.
"Knowledge speaks, but wisdom listens."
- Jimi Hendrix -

#14

p__

    p__


  • >1k berichten
  • 2972 berichten
  • Ervaren gebruiker

Geplaatst op 09 maart 2008 - 23:42

Ik weet nou eindelijk waar het aan lag, en het lag niet aan IE6 of IE7...

Het lag eraan dat zodra er op de button geklikt werd, dat die button dan geselecteerd werd, en hier vervolgens een <HR> geprobeerd werd aan toe te voegen.

De oplossing, die ik zelf toegevoegd had maar niet wist dat het een oplossing was, was om de button UNSELECTABLE te maken, dus:

<input type="button" UNSELECTABLE="on" value="rule" onclick="java script:doRule()">

#15

zpidermen

    zpidermen


  • >1k berichten
  • 1623 berichten
  • Ervaren gebruiker

Geplaatst op 10 maart 2008 - 07:26

Het lag eraan dat zodra er op de button geklikt werd, dat die button dan geselecteerd werd, en hier vervolgens een <HR> geprobeerd werd aan toe te voegen.

Maar waarom gaat het dan met mijn voorbeeldje (ook met een button) wel goed? Bovendien kan een button bijvoorbeeld wel een focus krijgen, of een clicked event afvuren, maar kan een button ook een select event hebben?

Veranderd door zpidermen, 10 maart 2008 - 07:33

Beter kaal als geen haar want een kip snurkt





0 gebruiker(s) lezen dit onderwerp

0 leden, 0 bezoekers, 0 anonieme gebruikers

Ook adverteren op onze website? Lees hier meer!

Gesponsorde vacatures

Vacatures