Scripts - Tutorials - Forum - Downloads - Showcase - Contact

Artikels

VPN vergelijken

Algemeen

Beginpagina

FAQ

Grafische worm (243)

Links

Nieuwsartikels

Nieuwsarchief

Boeken programmeren

Overzicht

Samenwerken

Webhosting

Zoek op Sitemasters

Leden

Registreren

Ledenlijst

Ons team

Links

webhostingtop10.be

Sociale media

Follow @sitemasters

Sitemasters

Adverteren op Sitemasters?

Contacteer ons

RSS

Link naar ons

Donaties

Poll

Je moet ingelogd zijn om te stemmen.

Statistieken

Linkpartners

Forum

Categorieën > JavaScript

IE textRange.text blijft leeg (Opgelost)

pinquin - 22/02/2011 17:29

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

html4strict code - Bekijk de code zonder highlighting - Klap code in

<div id="wysiwyg_259" class="wysiwyg_bar">
	<div class="wysBtn_bold">&nbsp;</div>
	<div class="wysBtn_italic">&nbsp;</div>
	<div class="wysBtn_underline">&nbsp;</div>
</div>
<textarea id="tekst_259" name="tekst_259">Zullen we samen dansen?!</textarea>

<div id="wysiwyg_259" class="wysiwyg_bar">
	<div class="wysBtn_bold">&nbsp;</div>
	<div class="wysBtn_italic">&nbsp;</div>
	<div class="wysBtn_underline">&nbsp;</div>
</div>
<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:

javascript code - Bekijk de code zonder highlighting - Klap code in

                function set_bb( id, style ) {
	var textarea = document.getElementById("tekst_" + id);
	if( textarea.selectionStart === undefined ) {
		textarea.focus();
		var textRange = document.selection.createRange();
		var rangeParent = textRange.parentElement();
		if( rangeParent === textarea )
			textRange.text = "[" + style + "]" + textRange.text + "[/" + style + "]";
		
		var tmp = "";
		$.each( textRange, function( i, n ) {
			tmp += i + ": " + n + "\n";
		} );
		alert(tmp);
	} else if ( obj.selectionStart != 'undefined' ) {
		//overige code werkt wel
	}
}

            
function set_bb( id, style ) {
	var textarea = document.getElementById("tekst_" + id);
	if( textarea.selectionStart === undefined ) {
		textarea.focus();
		var textRange = document.selection.createRange();
		var rangeParent = textRange.parentElement();
		if( rangeParent === textarea )
			textRange.text = "[" + style + "]" + textRange.text + "[/" + style + "]";
 
		var tmp = "";
		$.each( textRange, function( i, n ) {
			tmp += i + ": " + n + "\n";
		} );
		alert(tmp);
	} else if ( obj.selectionStart != 'undefined' ) {
		//overige code werkt wel
	}
}
 

Screenshot: wysiwyg fail

Iemand een idee wat er fout gaat?

gr,

6 antwoorden

Gesponsorde links

Beirensg - 22/02/2011 17:53

HTML beginner

waarom doe je niets als hetvolgende:

javascript code - Bekijk de code zonder highlighting - Klap code in

                textarea.value = textarea.value.substr(0,textarea.selectionStart) + "[i]" +textarea.value.substr(textarea.selectionStart,textarea.selectionEnd) + "[/i]" +textarea.value.substr(textarea.selectionEnd);

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.

pinquin - 23/02/2011 10:36
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,

Beirensg - 23/02/2011 10:51

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:

javascript code - Bekijk de code zonder highlighting - Klap code in

                 function set_bb( id,style ) {
     var textarea = document.getElementById("tekst_" + id);
    // alert(textarea.text+textarea.selectionStart+"-"+textarea.selectionEnd);
    //if( textarea.selectionStart != undefined ) {
         
         textarea.focus();
        var rng = document.selection.createRange();
       alert(rng.text);
         var rangeParent = rng.parentElement();
     if( rangeParent === textarea ){
             rng.text = "[" + style + "]" + rng.text + "[/" + style + "]";
         
         var tmp = "";
         $.each( rng, function( i, n ) {
             tmp += i + ": " + n + "\n";
         } );
         alert(tmp);
     }
 } 

            
function set_bb( id,style ) {
     var textarea = document.getElementById("tekst_" + id);
    // alert(textarea.text+textarea.selectionStart+"-"+textarea.selectionEnd);
    //if( textarea.selectionStart != undefined ) {
 
         textarea.focus();
        var rng = document.selection.createRange();
       alert(rng.text);
         var rangeParent = rng.parentElement();
     if( rangeParent === textarea ){
             rng.text = "[" + style + "]" + rng.text + "[/" + style + "]";
 
         var tmp = "";
         $.each( rng, function( i, n ) {
             tmp += i + ": " + n + "\n";
         } );
         alert(tmp);
     }
 }
 

Het zit soms in een klein hoekje (zeker als je op Microsoft moet vertrouwen)

pinquin - 23/02/2011 11:40
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.

Beirensg - 23/02/2011 11:43
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

pinquin - 23/02/2011 12:22
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.

Actiefste leden van de maand

Actieve forumberichten