UBB javascript
Klik op button: B, dat er om de geselecteerde tekst de tags <b> </b> komt te staan, of de tags en de caret tussen de tag
(driehoekjes moeten eigenlijk vierkante haakjes zijn ;))
Volgens mij kan dit best wel kort..
Ik dacht aan een functie als volgt..
function addUBB(form, textarea_id, tag1, tag2){
}
en dan onclick="addUBB('add', 'bericht', '<b>', '</b>')"
Gewijzigd op 05/10/2010 22:06:30 door Dick oo
Ik volg d'r geen hout van.
Misschien alleen Henk of alleen Annie laten tikken?
Karl Karl op 05/10/2010 22:11:00:
Misschien alleen Henk of alleen Annie laten tikken?
Hahaha ;-)
Gewoon de cursor tussen de ingevoerde tags..
van phphulp ubb alk en tinymce wordt ik niet wijzer
Een getCaret & setCaret-functie. Je doet een onkeypress-event (of onkeydown of whatever). Als 'b' gedrukt word - (wat onhandig is als je wilt typen 'bas beeft boven barends baard.', omdat je de b dan niet kan typen, dus dan krijg je 'as eeft oven arends aard.'), dus zou ik kijken of er op 'b' gedrukt ALS er tekst is geselecteerd (moet je dus ook uitzoeken...)
Dan kijk je van waar tót waar er geselecteerd is (vanuit de getCaret-functie) en dit replace je met '<b>Text</b>'. Daarna doe je er weer een setCaret-functie overheen, zodat de Caret weer op de goede plaats komt. De Caret moet uiteraard wel 7 plaatsen verder (vanwege de b-tags)
caretFuncties();
http://www.robertdeiman.net/preview.php
maar nu wil ik de cursor/pointer/caret tussen de tags..
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<script type="text/javascript">
function wrapText(id,Tag,Tag2) {
var el = document.getElementById(id);
if (el.setSelectionRange){
// W3C/Mozilla
el.value = el.value.substring(0,el.selectionStart)
+ "["+ Tag +"]"
+ el.value.substring(el.selectionStart,el.selectionEnd)
+ "[/"+ Tag2 +"]"
+ el.value.substring(el.selectionEnd,el.value.length);
document.el.focus();
} else if (document.selection && document.selection.createRange){
// IE code goes here
el.focus();
var range = document.selection.createRange();
range.text ="["+ Tag +"]" + range.text + "[/"+ Tag2 +"]";
document.el.focus();
}
}
</script>
<input style="font-weight:bold;" type="button" value="B" onClick="wrapText('msg','b','b' );">
<input style="font-style:italic;" type="button" value="I" onClick="wrapText('msg','i','i' );">
<input style="text-decoration:underline;" type="button" value="U" onClick="wrapText('msg','u','u' );">
<input style="text-decoration:line-through;" type="button" value="S" onClick="wrapText('msg','s','s' );">
<br /><br />
<textarea id="msg" cols="20" rows="5"></textarea>
</center>
function wrapText(id,Tag,Tag2) {
var el = document.getElementById(id);
if (el.setSelectionRange){
// W3C/Mozilla
el.value = el.value.substring(0,el.selectionStart)
+ "["+ Tag +"]"
+ el.value.substring(el.selectionStart,el.selectionEnd)
+ "[/"+ Tag2 +"]"
+ el.value.substring(el.selectionEnd,el.value.length);
document.el.focus();
} else if (document.selection && document.selection.createRange){
// IE code goes here
el.focus();
var range = document.selection.createRange();
range.text ="["+ Tag +"]" + range.text + "[/"+ Tag2 +"]";
document.el.focus();
}
}
</script>
<input style="font-weight:bold;" type="button" value="B" onClick="wrapText('msg','b','b' );">
<input style="font-style:italic;" type="button" value="I" onClick="wrapText('msg','i','i' );">
<input style="text-decoration:underline;" type="button" value="U" onClick="wrapText('msg','u','u' );">
<input style="text-decoration:line-through;" type="button" value="S" onClick="wrapText('msg','s','s' );">
<br /><br />
<textarea id="msg" cols="20" rows="5"></textarea>
</center>