[DHTML] document.selection.createRange() en select()

[Verwijderd]

Ik heb een simpele cms editor, en gebruik daarbij de functie editor.document.execCommand('FontSize', false, wat); om bepaalde stukken tekst een fontsize te geven.

"Editor" is overigens een iframe, en in die Iframe zijn stukken tekst editable zodra ze in een div zitten met de eigenschap contenteditable=true.

Met FontSize (eigenschap van execCommand) ben je erg beperkt wat betreft fontgrootte van tekst. (<font size=1></font> T/M <font size=7></font>)

Ik wil in plaats van HTML <font size> gebruik gaan maken van stylesheets om de fontgrootte in te stellen (font-size :6px T/M font-size :20px)

Nu heb ik de volgende (test) functie geschreven :

code:

function letterstyle(wat) {
  var cursor = editor.document.selection.createRange();
  cursor.pasteHTML('<b>' + cursor + '</b>');
  cursor.select();
}

Dit werkt prima, maar ik ben de selectie kwijt zodra ik pasteHTML gebruik. Ik wil graag de selectie die met de muis gemaakt is (tekst blauw maken) behouden blijft nadat pasteHTML aangeroepen is. Net zoals bij execCommand, waarbij de selectie behouden blijft zodra je de fontsize hebt gewijzigd. Of exacter gezegd, de selectie moet blijven liggen op de inhoud van "cursor", en de inhoud van cursor moet blauw weergegeven blijven.

Is dat mogelijk? cursor.select(); doet in ieder geval niet wat ik wil...

[André]

window.getselection();
document.createRange();
range.selectNode();

[ Voor 56% gewijzigd door André op 19-10-2004 11:57 ]

[Verwijderd]

getselection? Dat klinkt als mozilla. De code moet werken in Internet Explorer...

[André]

Zo dan:

code:

var Text = document.body.createTextRange();
Text.findText("Bla");
Text.select();

[Verwijderd]

code:

var Text = document.body.createTextRange();
Text.findText("Bla");
Text.select();

Juist, bovenstaande code werkt prima. Maar wat als het woord "Bla" 10x in mijn pagina staat, en ik het 5e woord moet hebben?

Klinkt kinderachtig, maar een zelfde soort senario is absoluut niet ondenkbaar.

Nog even mij code, maar dan ietsjes anders:

code:

var cursor = editor.document.selection.createRange();
cursor.pasteHTML('<b>' + cursor.htmlText + '</b>');
cursor.select();

Ok, na pasteHTML ben ik mijn "range" kwijt. Althans dat denk ik. De select methode die ik daarna uitvoer lijkt niks te doen, namelijk.

Dus ik probeer de range te dupliceren ( var range2 = cursor.duplicateRange() ) en vervolgens de select op range2 te leggen ( range2.select(); ), nadat ik op de originele cursor pasteHTML heb gedaan. Zonder success.

Dus probeer ik een bookmark van de range te maken met getBookmark(); en vervolgens na bewerking van cursor met pasteHTML die bookmark weer terug te halen. Zonder succes.

Ik heb al heel wat CMS editor's gezien, maar volgens mij kan ik me niet 1tje herinneren die succesvol een selectie blijft bewaren, of het CMS systeem gebruikt Java of activeX.

Is er geen andere oplossing mogelijk?

[Verwijderd]

Verwijderd schreef op 19 oktober 2004 @ 14:25:
knip

Ik heb al heel wat CMS editor's gezien, maar volgens mij kan ik me niet 1tje herinneren die succesvol een selectie blijft bewaren, of het CMS systeem gebruikt Java of activeX.

Ik ken er wel eentje... zie ondertitel

Trouwens heb ik dat gedeelte van mijn wysiwyg editor hier al eens op tweakers gepost. Het gedeelte om een node te selecteren.
Maar goed, ik wil nog wel een copy paste doen:

Java:

// Selects the contents inside the given node
NextAvenue.prototype.selectNodeContents = function(node, pos) {
  var range, n = nextavenue;
  var collapsed = (typeof pos != "undefined");
  if (n.browser.isIE) {
    range = n.getFrame().document.body.createTextRange();
    range.moveToElementText(node);
    (collapsed) && range.collapse(pos);
    range.select();
  } else {
    var sel = n.getSelection();
    range = n.getFrame().document.createRange();
    range.selectNodeContents(node);
    (collapsed) && range.collapse(pos);
    sel.removeAllRanges();
    sel.addRange(range);
  }
  n._setRange(range);
};

Hier moet je wel mee uit de voeten kunnen.

[Verwijderd]

Juist Jurgen, maar dat is dus een Java oplossing als ik het goed begrijp... Geen andere mogelijkheid denk ik dus? Of begrijp ik bovenstaande code niet helemaal?? Wat niet onwaarschijnlijk is...

[ Voor 54% gewijzigd door Verwijderd op 19-10-2004 21:39 ]

[Verwijderd]

Verwijderd schreef op 19 oktober 2004 @ 21:33:
Juist Jurgen, maar dat is dus een Java oplossing als ik het goed begrijp... Geen andere mogelijkheid denk ik dus? Of begrijp ik bovenstaande code niet helemaal?? Wat niet onwaarschijnlijk is...

Hij heeft dus java code tags gebruikt, voor de kleur. Het is gewoon javascript.

[Verwijderd]

ok.. dan kom ik gewoonweg javascript kennis tekort Prototype e.d. vind ik nog wat eng (heeft toch iets te maken met klassen erven ofzo??) Maar kan iemand me gelukkig maken en mijn volgende stukje script aanpassen?? Dan zal ik hopelijk het licht zien...

Ik selecteer een stuk tekst
Ik klik de button
Ik wil (heel graag) dat de selectie die ik gemaakt heb, nog steeds blauw is...

code:

<html>
<head>
<title></title>
</head>

<body>
<input type="button" name="button" value="Maak Bold" onClick="maakbold()"><br><br>
<div contenteditable="true">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod
 tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
 vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
 no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut
 labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam 
et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata 
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur 
</div>
</body>
</html>

<script language="javascript">
function maakbold() {
  var objRange = document.selection.createRange();
    var strText = objRange.htmlText;
    objRange.pasteHTML('<b>' + strText + '</b>');
}
</script>

[ Voor 45% gewijzigd door Verwijderd op 19-10-2004 22:44 ]

[Verwijderd]

Erm, na lang zoeken begin ik het te begrijpen. Ik heb mijn functie zojuist vervangen:

code:

function maakbold() {
  var objRange = document.selection.createRange();
  var strText = objRange.htmlText;
  var bla = objRange.text;
  lengte = bla.length;
  objRange.pasteHTML('<b>' + strText + '</b>');
  objRange.moveStart("character",1-(lengte + 1));
  objRange.moveEnd("character",-1);
  objRange.expand("character");
  objRange.select();
}

En dat lijkt te werken. Maar ik ben bang dat deze code niet echt de meest juiste is, stel dat er bijvoorbeeld een object als een image tussen de geselecteerde tekst zit? Verbeterde functies zijn hartelijk welkom!

[ Voor 8% gewijzigd door Verwijderd op 19-10-2004 23:18 ]

[Verwijderd]

Die code van Juorgen is per definitie beter, omdat het in meerdere browsers werkt.

[ Voor 5% gewijzigd door Verwijderd op 20-10-2004 22:11 ]

[Verwijderd]

Met alle respect voor Jorgen's code...

Check de website http://www.nextavenue.com/development/, en selecteer een stuk tekst in de CMS editor (pak bijvoorbeeld de helft van de bovenste en de helft van de paragraaf daaronder) en kies een stylesheet. Je zal zien dat de style niet lekker wordt toegepast, en de range ineens groter is geworden. En als je daarna nog een beetje verder gaat spelen dan krijg je allerhande javascript errors.

Het functioneert dan wel beter dan de code die ik gisteravond geschreven heb, maar je loopt toch tegen problemen aan die nagenoeg niet op te lossen zijn (dat denk ik tenminste).

Kijk, niet dat ik het beter kan programmeren ofzo, maar functie's die niet helemaal goed werken kan je eigenlijk maar beter niet in een CMS plaatsen. Klanten zijn nou eenmaal over het algemeen niet zo handig en begrijpen niet waarom iets niet werkt... *het werkt toch ook in Word?* Voordat je het weet is de pagina verkloot, en dam weet je wel wiet het weer mag fixen.

Daarnaast interesseert het me eigenlijk niet dat de CMS code niet werkt in Mozilla of andere browsers, ik bouw het gewoon op de MSHTML engine. Daarentegen vind ik het als webdesigner overigens wel belangrijk dat de pagina's zelf goed werken op andere platformen en in andere browsers, maar voor het "admin" gedeelte maakt het me niet zoveel uit... Waarom zou ik er moeite voor doen en er veel (extra) tijd in steken om een CMS browser-compatible te maken als toch al onze klanten IE gebruiken... Bovendien wordt zo'n webapplicatie er ook niet sneller op, met al die if then else statements in je code...

Als de cms markt nog niet verzadigd zou zijn geweest, dan was het overigens een ander verhaal...

[Verwijderd]

Verwijderd schreef op 20 oktober 2004 @ 18:02:
Kijk, niet dat ik het beter kan programmeren ofzo, maar functie's die niet helemaal goed werken kan je eigenlijk maar beter niet in een CMS plaatsen. Klanten zijn nou eenmaal over het algemeen niet zo handig en begrijpen niet waarom iets niet werkt... *het werkt toch ook in Word?* Voordat je het weet is de pagina verkloot, en dam weet je wel wiet het weer mag fixen.

Goed punt, ben ik het volledig mee eens.

Daarnaast interesseert het me eigenlijk niet dat de CMS code niet werkt in Mozilla of andere browsers, ik bouw het gewoon op de MSHTML engine. Daarentegen vind ik het als webdesigner overigens wel belangrijk dat de pagina's zelf goed werken op andere platformen en in andere browsers, maar voor het "admin" gedeelte maakt het me niet zoveel uit... Waarom zou ik er moeite voor doen en er veel (extra) tijd in steken om een CMS browser-compatible te maken als toch al onze klanten IE gebruiken... Bovendien wordt zo'n webapplicatie er ook niet sneller op, met al die if then else statements in je code...

Als de cms markt nog niet verzadigd zou zijn geweest, dan was het overigens een ander verhaal...

Kijk en daar ga jij in de fout, want stel nou dat een klant bij je komt om een CMS aan te schaffen, maar ze werken allemaal op Appeltjes? (niet geheel ondenkbaar in de wereld waar CMS systemen veel worden toegepast) Hoe los je dat dan op... ermm sorry maar het werkt alleen in IE op windows... Reactie klant: Tot ziens! we gaan wel naar een bedrijf dat zijn zaakjes wel voor elkaar heeft.

Je kan jezelf een hoop moeite besparen door het gewoon in een keer goed te doen, trouwens onzin argument natuurlijk over de snelheid, van toepassing op DHTML animaties en pumpkins, maar een stukje tekst bold of italic zetten, of plaatje plaatsen zal er niet langzamer door worden.

[Verwijderd]

Kijk en daar ga jij in de fout, want stel nou dat een klant bij je komt om een CMS aan te schaffen, maar ze werken allemaal op Appeltjes? (niet geheel ondenkbaar in de wereld waar CMS systemen veel worden toegepast) Hoe los je dat dan op... ermm sorry maar het werkt alleen in IE op windows... Reactie klant: Tot ziens! we gaan wel naar een bedrijf dat zijn zaakjes wel voor elkaar heeft.

Moet nog even melden dat ik toevallig een website aan het bouwen ben (inclusief CMS) voor een designbedrijf (voornamelijk dtp'ers). En ja hoor, bijna allemaal macs. Maar gelukkig hebben ze dus ook een paar windows pc's staan, dus geen enkel probleem in dit geval. Maar dat neemt niet weg dat het inderdaad kan voorkomen...