login  Naam:   Wachtwoord: 
Registreer je!
 Forum

IE textRange.text blijft leeg (Opgelost)

Offline pinquin - 22/02/2011 17:29
Avatar van pinquinHTML interesse Beste Sitemasters,

Ik heb een simpele versie van een wysiwyg gemaakt om tekst bold, italic, underline te zetten. Als je tekst selecteert en vervolgens op een van de knoppen druk is het de bedoeling dat er om de selecteerde tekst bb_code moet worden gezet. Niet lastig en het werkt ook (bijna) allemaal, alleen in Internet Explorer blijft de textRange.text leeg. Ik heb verschillende kant en klare oplossingen geprobeerd die ik heb gevonden. Het rare is dat de oplossing op de site waar ik het vandaan heb wel werkt, maar zodra ik het zelf implementeer werkt het niet en komt er alleen op de plek van de cursor de bb_code te staan met de overige tekst er omheen.

Ik heb de volgende html:
  1. <div id="wysiwyg_259" class="wysiwyg_bar">
  2. <div class="wysBtn_bold">&nbsp;</div>
  3. <div class="wysBtn_italic">&nbsp;</div>
  4. <div class="wysBtn_underline">&nbsp;</div>
  5. </div>
  6. <textarea id="tekst_259" name="tekst_259">Zullen we samen dansen?!</textarea>

Ik heb meerdere textarea's met verschillende id's.

en de volgende js:
  1. function set_bb( id, style ) {
  2. var textarea = document.getElementById("tekst_" + id);
  3. if( textarea.selectionStart === undefined ) {
  4. textarea.focus();
  5. var textRange = document.selection.createRange();
  6. var rangeParent = textRange.parentElement();
  7. if( rangeParent === textarea )
  8. textRange.text = "[" + style + "]" + textRange.text + "[/" + style + "]";
  9.  
  10. var tmp = "";
  11. $.each( textRange, function( i, n ) {
  12. tmp += i + ": " + n + "\n";
  13. } );
  14. alert(tmp);
  15. } else if ( obj.selectionStart != 'undefined' ) {
  16. //overige code werkt wel
  17. }
  18. }


Screenshot: wysiwyg fail

Iemand een idee wat er fout gaat?

gr,

6 antwoorden

Gesponsorde links
Offline Beirensg - 22/02/2011 17:53
Avatar van Beirensg HTML beginner waarom doe je niets als hetvolgende:
  1. textarea.value = textarea.value.substr(0,textarea.selectionStart) + "[i]" +textarea.value.substr(textarea.selectionStart,textarea.selectionEnd) + "[/i]" +textarea.value.substr(textarea.selectionEnd);


Dit zou moeten werken.
Offline pinquin - 23/02/2011 10:36
Avatar van pinquin HTML interesse Bedankt Beirensg voor je reactie,
maar naar mijn weten werkt selectionStart en selectionEnd niet in internet explorer.
Ik heb heb het wel geprobeerd, maar dan pakt hij niet de geselecteerde tekst, maar de hele tekst.

gr,
Offline Beirensg - 23/02/2011 10:51
Avatar van Beirensg HTML beginner Je hebt gelijk. Ik heb een beetje verder getest, je zal de variabele textRange een andere naam moeten geven (dit is een protected word in IE) ggef deze bvb de naam rng:
  1. function set_bb( id,style ) {
  2. var textarea = document.getElementById("tekst_" + id);
  3. // alert(textarea.text+textarea.selectionStart+"-"+textarea.selectionEnd);
  4. //if( textarea.selectionStart != undefined ) {
  5.  
  6. textarea.focus();
  7. var rng = document.selection.createRange();
  8. alert(rng.text);
  9. var rangeParent = rng.parentElement();
  10. if( rangeParent === textarea ){
  11. rng.text = "[" + style + "]" + rng.text + "[/" + style + "]";
  12.  
  13. var tmp = "";
  14. $.each( rng, function( i, n ) {
  15. tmp += i + ": " + n + "\n";
  16. } );
  17. alert(tmp);
  18. }
  19. }


Het zit soms in een klein hoekje (zeker als je op Microsoft moet vertrouwen) 
Offline pinquin - 23/02/2011 11:40
Avatar van pinquin HTML interesse Ik heb dit ook al geprobeerd, maar het lijkt erop dat om een of andere reden de selectie verdwijnt (wat logisch is) als ik op een knop klik die buiten de textarea staat en dat daardoor de selectie verdwijnt.
Offline Beirensg - 23/02/2011 11:43
Avatar van Beirensg HTML beginner Ik heb dit nochtans getest in jsfiddle (in IE) en dit werkt:
http://jsfiddle.net/beirensg/qpCXj/
Ik zal misschien nog eens verder moeten testen met een normale site.
Bedankt door: pinquin
Offline pinquin - 23/02/2011 12:22
Avatar van pinquin HTML interesse Heb de oplossing gevonden....
Doordat ik een onclick heb gezet op een div die daarna de functie aanroept wordt blijkbaar het object veranderd. Nu heb ik de knoppen in een <a> gezet die de javascript functie aanroept en nu werkt het wel....

Bedankt voor je reacties en het proberen.

gr,
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.184s