Html + javascript, vraag over rich text editor

p__ · zo 09 mar 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.

Code: Selecteer alles

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

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.

zpidermen · zo 09 mar 2008, 10:39

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

Code: Selecteer alles

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:

Code: Selecteer alles

<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>

p__ · zo 09 mar 2008, 10:52

Code: Selecteer alles
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.

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

Code: Selecteer alles

<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.

p__ · zo 09 mar 2008, 11:03

Ik kan ook de innerHTML bewerken:

Code: Selecteer alles

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.

zpidermen · zo 09 mar 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.

p__ · zo 09 mar 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.

zpidermen · zo 09 mar 2008, 12:24

Waarom wil je eigenlijk op die plek een horizontale lijn?

p__ · zo 09 mar 2008, 12:27

Ik heb net nog een keer dit geprobeerd:

Code: Selecteer alles

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.

zpidermen · zo 09 mar 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).

p__ · zo 09 mar 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.

p__ · zo 09 mar 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.

zpidermen · zo 09 mar 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.

Ger · zo 09 mar 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.

p__ · zo 09 mar 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:

Code: Selecteer alles

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

zpidermen · ma 10 mar 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?

Html + javascript, vraag over rich text editor

Html + javascript, vraag over rich text editor

Re: Html + javascript, vraag over rich text editor

Re: Html + javascript, vraag over rich text editor

Re: Html + javascript, vraag over rich text editor

Re: Html + javascript, vraag over rich text editor

Re: Html + javascript, vraag over rich text editor

Re: Html + javascript, vraag over rich text editor

Re: Html + javascript, vraag over rich text editor

Re: Html + javascript, vraag over rich text editor

Re: Html + javascript, vraag over rich text editor

Re: Html + javascript, vraag over rich text editor

Re: Html + javascript, vraag over rich text editor

Re: Html + javascript, vraag over rich text editor

Re: Html + javascript, vraag over rich text editor

Re: Html + javascript, vraag over rich text editor

Contact

Educatie

Community