Hướng dẫn thêm các nút bbcode cho wblib

[AdminAdmin is verified member.]

Như các bạn đã biết trình soạn thảo của wblib rất thô sơ, chỉ là một khung để chúng ta nhập text và khi sử dụng BBCODE thì phải nhập bằng tay.
Hôm nay mình sẽ hướng dẫn các bạn cách tạo thêm các nút BBCODE để thuận tiện cho việc soạn thảo.
Đầu tiên là chèn đoạn vào add_article.php

<script>
function BASIC_InsertTag(tagOpen, tagClose, sampleText) {
var clientPC = navigator.userAgent.toLowerCase(); // Get client info
var is_gecko = ((clientPC.indexOf('gecko')!=-1) && (clientPC.indexOf('spoofer')==-1)
                && (clientPC.indexOf('khtml') == -1) && (clientPC.indexOf('netscape/7.0')==-1));
var areas = document.getElementsByTagName('textarea');
var txtarea = areas[0];
if (document.selection  && !is_gecko) {
var theSelection = document.selection.createRange().text;
if (!theSelection) {
theSelection=sampleText;
}
txtarea.focus();
if (theSelection.charAt(theSelection.length - 1) == " ") { // exclude ending space char, if any
theSelection = theSelection.substring(0, theSelection.length - 1);
document.selection.createRange().text = tagOpen + theSelection + tagClose + " ";
} else {
document.selection.createRange().text = tagOpen + theSelection + tagClose;
}
// Mozilla
} else if(txtarea.selectionStart || txtarea.selectionStart == '0') {
var replaced = false;
var startPos = txtarea.selectionStart;
var endPos = txtarea.selectionEnd;
if (endPos-startPos) {
replaced = true;
}
var scrollTop = txtarea.scrollTop;
var myText = (txtarea.value).substring(startPos, endPos);
if (!myText) {
myText=sampleText;
}
var subst;
if (myText.charAt(myText.length - 1) == " ") { // exclude ending space char, if any
subst = tagOpen + myText.substring(0, (myText.length - 1)) + tagClose + " ";
} else {
subst = tagOpen + myText + tagClose;
}
txtarea.value = txtarea.value.substring(0, startPos) + subst +
txtarea.value.substring(endPos, txtarea.value.length);
txtarea.focus();
if (replaced) {
var cPos = startPos+(tagOpen.length+myText.length+tagClose.length);
txtarea.selectionStart = cPos;
txtarea.selectionEnd = cPos;
} else {
txtarea.selectionStart = startPos+tagOpen.length;
txtarea.selectionEnd = startPos+tagOpen.length+myText.length;
}
txtarea.scrollTop = scrollTop;
}
if (txtarea.createTextRange) {
txtarea.caretPos = document.selection.createRange().duplicate();
}
}</script>

Tại nơi bạn muốn hiện các nút BBCODE thì bạn thêm đoạn sau (tốt nhất là bên trên khung nhập nội dung bài viết cho tiện).
Chú ý:
+ Bạn nên tùy chỉnh cho phù hợp với những BBCODE bạn tạo trong func.
+ Thay các Text bằng hình ảnh cho bắt mắt.
In đậm:

<a href="javascript:BASIC_InsertTag('[b]', '[/b]', 'Bold');">B</a>

hoặc

<a href="javascript:BASIC_InsertTag('[b]', '[/b]', 'Bold');"><img src="hình ảnh"/></a>

Chữ nghiêng:

<a href="javascript:BASIC_InsertTag('[i]', '[/i]', 'Italic');">I</a>

Gạch chân:

<a href="javascript:BASIC_InsertTag('[u]', '[/u]', 'Underline');">U</a>

Chèn ảnh:

<a href="javascript:BASIC_InsertTag('[img]', '[/img]', 'IMG');">IMG</a>