1 van 2
Html + javascript, vraag over rich text editor
Geplaatst: zo 09 mar 2008, 10:12
door p__
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.
Re: Html + javascript, vraag over rich text editor
Geplaatst: zo 09 mar 2008, 10:39
door zpidermen
1.Weet iemand hoe je een horizontale rule kan invoegen?
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>
Re: Html + javascript, vraag over rich text editor
Geplaatst: zo 09 mar 2008, 10:52
door p__
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.
Re: Html + javascript, vraag over rich text editor
Geplaatst: zo 09 mar 2008, 11:03
door p__
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.
Re: Html + javascript, vraag over rich text editor
Geplaatst: zo 09 mar 2008, 11:58
door zpidermen
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.
Re: Html + javascript, vraag over rich text editor
Geplaatst: zo 09 mar 2008, 12:15
door p__
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.
Re: Html + javascript, vraag over rich text editor
Geplaatst: zo 09 mar 2008, 12:24
door zpidermen
Waarom wil je eigenlijk op die plek een horizontale lijn?
Re: Html + javascript, vraag over rich text editor
Geplaatst: zo 09 mar 2008, 12:27
door p__
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.
Re: Html + javascript, vraag over rich text editor
Geplaatst: zo 09 mar 2008, 12:36
door zpidermen
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).
Re: Html + javascript, vraag over rich text editor
Geplaatst: zo 09 mar 2008, 12:45
door p__
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.
Re: Html + javascript, vraag over rich text editor
Geplaatst: zo 09 mar 2008, 13:48
door p__
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.
Re: Html + javascript, vraag over rich text editor
Geplaatst: zo 09 mar 2008, 13:54
door zpidermen
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.
Re: Html + javascript, vraag over rich text editor
Geplaatst: zo 09 mar 2008, 14:12
door Ger
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.
Re: Html + javascript, vraag over rich text editor
Geplaatst: zo 09 mar 2008, 23:42
door p__
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()">
Re: Html + javascript, vraag over rich text editor
Geplaatst: ma 10 mar 2008, 07:26
door zpidermen
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?