Ukala gazoz kapagi

Aradım taradım şöyle basit bir BBCode yazı editörü bulamadım hepsi maşallah benim yaptığım yazılımın 4-5 katı. Benim istediğim html kodlarını db ye kaydetmeyip enjeksiyon (injection)’u önlemek amaçlı küçük bir yazılım ama bulamadım…

Sonra kolları sıvayıp bir girişeyim dedim olaya bir kaç editörü indirip kaynak kodlarına baktım ajax dolu veya 10 tane js dosyası olan örnekler arasından benim istediğim özellikleri seçmeye çalıştım ama nerde…

Sonra eski yazılımlarıma döndüm fi tarihinde kendi yaptığım ilkel bir BBCode editör vardı halen bir sitede bunu kullanıyorum -zaten BBCode serüveninede o siteyi güncellediğim için girdim- onu geliştirip görselleştirebilir miyim diye bakıyorken bir baktım bitmiş

Şimdi beraberce burada basit (simple) bir BBCode Editör yapalım.

Öncelikle BBCode editörümüzün bbcode.js dosyasına bakalım

function bbcode(kod) {
tt = document.getElementById("yazialan");
if (document.getSelection) // firefox
{ var once = tt.value.substring(0, tt.selectionStart);
var sonra = tt.value.substr(tt.selectionEnd);
var ara = tt.value.substring(tt.selectionStart, tt.selectionEnd);
tt.value = once + "[" + kod + "]” + ara + “[/" + kod + "]” + sonra; }
else // IE
{ var ara = document.selection.createRange().text;
tt.focus();
var sec = document.selection.createRange();
sec.text = “[" + kod + "]” + ara + “[/" + kod + "]“; }
return; }

Küçük olduğuna bakmayın genel manada bütün işi bu kod yapıyor. Bu kodu nasıl kullanacağımız konusuna gelirsek
<img src="icons/kalin.gif" onClick="bbcode('b');" alt="Kalin">
veya buton kullanılmak istenirse
<input type="button" value="B" onClick="bbcode('b')">
veya yazı kullanılmak istenirse
<a href="#" onClick="bbcode('b');" title="Kalin">B</a>

Burada bbcode(’b’) olan yerde b yerine ne yazarsak seçtiğimiz metinin başına ve sonuna o bbcode olarak gelecektir. Örnek verirsek.

<a href="#" onClick="bbcode('i');" title="Kalin">I</a>

üstteki durumda textareamızın içi [i]deneme[/i] olacaktır.

Şimdi bu istekleri yazıya dökme zamanı textarea ya yazdıralım

<textarea rows="10" name="yazi" id="yazialan"></textarea>

Burada id=”yazialan” olayı önemli çünkübaşta bbcode.js içerisinde alan olarak bu ismi tanımladık.

Yukarıdaki bbcode(’i’) örneğinde olduğu gibi bunu istediğiniz kadar çoğaltabilirsiniz. Bundan sonraki işlem veritabanına bbcode olarak kayıt edilen verinin html olarak gösterimi…

Ben asp adına anlatayım önce bir function tanımlayalım;

function html(metin)
metin=replace(metin, “[b]“,”<b>”)
metin=replace(metin, “[/b]“,”</b>”)
html=metin
end function

Tanımladığımız function bizim bbcode olarak veritabanımızda olan kodları html’e çevirecek kullanımı

response.write(html(rs("yazi")))

şeklinde tabi burada veritabanı bağlantılarımı yapıp recordset imizi tanımlamış olduğumuzu varsayıyorum o başka bir konu

Evet Basit BBCode editörümüzün ilk bölümü burda bitti.

Demo: BBCode basit yazi editörü