PHP expert |
|
Oke here we go, toch maar eens tijd om bezig te gaan met JavaScript. Gedacht aan de nadelen? Ja, alleen niet dat ze zo gecompliceerd zouden zijn. Genaamd: browser compatibiliteit.
Iedereen weet dat Chrome gebruik maakt van de V8 JS Engine, nu probeer ik m.b.v. onderstaande code, een BB insert te maken op een textarea met de naam "bericht" en id "bericht".
function addTags(Tag, fTag)
{
var obj = document.nieuws.bericht;
obj.focus();
if (document.selection && document.selection.createRange) // Internet Explorer
{
sel = document.selection.createRange();
if (sel.parentElement() == obj) sel.text = Tag + sel.text + fTag;
}
else if (obj != "undefined") // Firefox
{
var longueur = parseInt(obj.textLength);
var selStart = obj.selectionStart;
var selEnd = obj.selectionEnd;
obj.value = obj.value.substring(0,selStart) + Tag + obj.value.substring(selStart,selEnd) + fTag + obj.value.substring(selEnd,longueur);
}
else obj.value += Tag + fTag;
obj.focus();
}
function addTags(Tag, fTag) { var obj = document.nieuws.bericht; obj.focus(); if (document.selection && document.selection.createRange) // Internet Explorer { sel = document.selection.createRange(); if (sel.parentElement() == obj) sel.text = Tag + sel.text + fTag; } else if (obj != "undefined") // Firefox { var longueur = parseInt(obj.textLength); var selStart = obj.selectionStart; var selEnd = obj.selectionEnd; obj.value = obj.value.substring(0,selStart) + Tag + obj.value.substring(selStart,selEnd) + fTag + obj.value.substring(selEnd,longueur); } else obj.value += Tag + fTag; obj.focus(); }
Het heeft iets te maken met document.selection, alleen kan ik maar niet in me kop krijgen waarom dit wel in IE werkt (overigens met een omweg ook in FF) maar niet in Chrome. (Ongetwijfelt is V8 JS Engine de schuldige).
Hoe kan ik dit alsnog in Chrome werkend krijgen?
Wat moet de code doen:
Volgende wordt in een textarea getypt:
"Hallo deze tekst moet bold."
Achteraf selecteer je "bold", en klik je een item aan (m.b.v. onClick voert ie de addTags uit. Die plant [.b] en [./b] om de geselecteerde tekst. Dus dan krijg je:
"Hallo deze tekst moet [.b]bold[./b]."
Wat doet de code nu:
Als ik volgens bovenstaande te werk ga in Chrome, krijg ik als resultaat in de textarea:
"Hallo deze tekst moet [.b]bold[./b]bold."
NOTE: [.b] en [./b] zijn natuurlijk zonder punt.
Edit:
Om een tag toe te voegen gebruik ik:
<img src="../../img/bold.png" onClick="addTags('[b]', '[/b]');">
<img src="../../img/bold.png" onClick="addTags('[b]', '[/b]');">
Textarea:
<textarea name="bericht" style="width: 600px; height: 300px;" id="bericht"><? if(isset($_POST['bericht'])) echo $_POST['bericht']; ?></textarea>
<textarea name="bericht" style="width: 600px; height: 300px;" id="bericht"><? if(isset($_POST['bericht'])) echo $_POST['bericht']; ?></textarea>
|