De PHPhulp kroeg
UBB insert
Ik durf de vraag eigenlijk bijna niet te stellen.. Maar ik zoek naar een goed werkende UBB inserter. Een die ook om geselecteerde tekst UBB codes plaatst, of op de plek waar de cursor staat. Ook als de cursor niet in de textarea staat moet hij hem aan het eind van alle tekst in de textarea invoegen..
Ik heb er wel 1 gevonden namelijk deze:
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function UBB(target, sUBB, eUBB){
var objTxtArea = target;
if (!eUBB){
eUBB = ' '+sUBB+' '; // Smileys..
sUBB = '';
}
if (objTxtArea.selectionStart || objTxtArea.selectionStart == 0){
var ss = objTxtArea.selectionStart;
var se = objTxtArea.selectionEnd;
objTxtArea.value = objTxtArea.value.substring(0, ss) + sUBB + objTxtArea.value.substring(ss, se) + eUBB + objTxtArea.value.substring(se, objTxtArea.value.length);
if (sUBB.length != 0){
objTxtArea.selectionStart = ss;
objTxtArea.selectionEnd = se + sUBB.length + eUBB.length;
}else{
objTxtArea.selectionStart = se + sUBB.length + eUBB.length;
objTxtArea.selectionEnd = objTxtArea.selectionStart;
}
objTxtArea.focus();
}else if (objTxtArea.createTextRange){
objTxtArea.focus(); //Needs to get focus to prevent other objects to get ubb codes
document.selection.createRange().text = sUBB + document.selection.createRange().text + eUBB;
}else{
objTxtArea.value = objTxtArea.value + sUBB + eUBB;
}
}
var objTxtArea = target;
if (!eUBB){
eUBB = ' '+sUBB+' '; // Smileys..
sUBB = '';
}
if (objTxtArea.selectionStart || objTxtArea.selectionStart == 0){
var ss = objTxtArea.selectionStart;
var se = objTxtArea.selectionEnd;
objTxtArea.value = objTxtArea.value.substring(0, ss) + sUBB + objTxtArea.value.substring(ss, se) + eUBB + objTxtArea.value.substring(se, objTxtArea.value.length);
if (sUBB.length != 0){
objTxtArea.selectionStart = ss;
objTxtArea.selectionEnd = se + sUBB.length + eUBB.length;
}else{
objTxtArea.selectionStart = se + sUBB.length + eUBB.length;
objTxtArea.selectionEnd = objTxtArea.selectionStart;
}
objTxtArea.focus();
}else if (objTxtArea.createTextRange){
objTxtArea.focus(); //Needs to get focus to prevent other objects to get ubb codes
document.selection.createRange().text = sUBB + document.selection.createRange().text + eUBB;
}else{
objTxtArea.value = objTxtArea.value + sUBB + eUBB;
}
}
Alleen kan ik geen manier vinden om de waarde "target" doormiddel van jquery mee te sturen..
Wat ik eigenlijk wil is dat dat als je op bijvoorbeel de UBB button "B" klikt dat hij dan de eerste textarea die te vinden is VOOR de geklikte UBB button meestuurt in de waarde "target".. Ik probeerde dit met:
Code (php)
1
2
3
4
2
3
4
$("#ubb_bold").click(function() {
var target = $(this).prev("textarea");
UBB(target, "[b]","[/b]");
});
var target = $(this).prev("textarea");
UBB(target, "[b]","[/b]");
});
Helaas werkt dit niet.. En ik kan me geen andere manier bedenken hoe ik dit op deze manier mee kan geven.
Google helpt me ook niet echt verder dus dan is mijn laatste keus het hier even vragen. Weet iemand een oplossing? Of kent een goede UBB insert javascriptje? Je zou me heel erg helpen!
Groetjes,
Mik
Gewijzigd op 01/10/2012 13:49:25 door Mik PHP
Code (php)
1
2
2
var target = $(this).prev("textarea");
UBB(target[0], "[b]","[/b]");
UBB(target[0], "[b]","[/b]");
De jQuery selector* geeft de elementen altijd in een array terug. Zelfs als het via id is.
Als je het element zelf nodig hebt, volstaat het om het nulde item door te geven ...
(* misschien druk ik me een beetje ongelukkig uit; ik hoop dat het duidelijk is)
Gewijzigd op 01/10/2012 17:20:24 door Kris Peeters
Code (php)
1
2
2
var target = $(this).prev("textarea")[0];
UBB(target, "[b]","[/b]");
UBB(target, "[b]","[/b]");
Echter werkte dit niet.. Nu ik dit probeer:
Code (php)
1
2
2
var target = $("textarea")[0];
UBB(target, "[b]","[/b]");
UBB(target, "[b]","[/b]");
werkt het wel.. Ik had de oplossing dus onbewust al gevonden alleen stuit ik op een ander probleem. Hoe kan ik ervoor zorgen dat hij de textarea wel selecteerd door te zoeken naar de eerst vorige? Want als ik nu meerder textarea's op 1 pagina ga krijgen zal hij ze daar ook inserten.
@Kris:
Bedankt voor je oplossing! De uitleg was goed.
Toevoeging op 01/10/2012 18:29:53:
Ik heb het uiteindelijk zo moeten oplossen:
De textarea zit in de parent van de UBB-button dus dan maar 1 stapje omhoog en dan de textarea proberen te vinden.
Code (php)
1
2
2
var target = $(this).parents().find("textarea")[0];
UBB(target, "[b]","[/b]");
UBB(target, "[b]","[/b]");
Toevoeging op 01/10/2012 19:04:24:
Heb weer een soort gelijk probleem. Dit is nu de hele code om het javascript op te roepen als je op de UBB button klikt:
Code (php)
1
2
3
4
5
6
2
3
4
5
6
$(".ubb_btn_wrapper#bold").click(function() {
var textarea = $(this).parents().find("textarea:first")[0];
var counter = $(this).next("div.charcounter_wrapper").children("input")[0];
UBB(textarea, "[b]","[/b]");
textCounter(textarea,counter,500);
});
var textarea = $(this).parents().find("textarea:first")[0];
var counter = $(this).next("div.charcounter_wrapper").children("input")[0];
UBB(textarea, "[b]","[/b]");
textCounter(textarea,counter,500);
});
Nu wil ik dat hij na de UBB tag in de textarea gezet te hebben, het aantal characters gaat tellen in de textarea en de charcounter update (Dus hoeveel characters er nog over zijn). Alleen deze selecteren lukt al helemaal niet.
De HTML opmaak ziet er ongeveer zo uit:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<div class="textarea_wrapper">
<div class="area">
<textarea name="new_msg">
</div>
<div class="options">
<div class="ubb_wrapper" id="bold"></div> // <<<< HIER IS DUS DE BUTTON
<div class="charcounter_wrapper">
<input type="text" name="charcounter" id="charcounter" value="500" /> // << EN HIER DE CHARCOUNTER
</div>
</div>
</div>
<div class="area">
<textarea name="new_msg">
</div>
<div class="options">
<div class="ubb_wrapper" id="bold"></div> // <<<< HIER IS DUS DE BUTTON
<div class="charcounter_wrapper">
<input type="text" name="charcounter" id="charcounter" value="500" /> // << EN HIER DE CHARCOUNTER
</div>
</div>
</div>
En deze codes heb ik allemaal geprobeert om de input (charcounter) te selecteren:
Code (php)
1
2
3
4
2
3
4
var counter = $(this).next("div.charcounter_wrapper").children("input")[0];
var counter = $(this).next("input#charcounter")[0];
var counter = $(this).find("input#charcounter")[0];
var counter = $(this).find("input#charcounter:first")[0];
var counter = $(this).next("input#charcounter")[0];
var counter = $(this).find("input#charcounter")[0];
var counter = $(this).find("input#charcounter:first")[0];
En dit werkt allemaal niet.. Iemand enig idee hoe ik dit kan oplossen?
Toevoeging op 01/10/2012 19:07:26:
OPLOSSING:
En dit werkt nu opeens wel:
Code (php)
1
var counter = $(this).parents().find("input#charcounter:first")[0];
Iemand enig idee waarom wel?
Toevoeging op 01/10/2012 19:10:21:
Ow wat ben ik stom.. Ik zie het al.. Ik zit telkens in de button.. En door parents() niet meer.. Haha zo stom! Naja misschien is dit educatief voor andere phphulp bezoekers!
Zeg, dat is allemaal niet nodig.
Als je een id hebt, gebruik ze dan gewoon.
$('#charcounter')
Gewijzigd op 02/10/2012 12:12:06 door Kris Peeters
Uiteraard zullen ze dan dus niet allemaal hetzelfde id hebben.