Сам javascript
function editor(tarea){
var textarea_id = tarea;
var area = document.getElementById(textarea_id);
bbstyle = 'style="text-decoration:none;color:#000;margin-left:5px;line-height:22px;"'
bbtags = [
'<a href="#" onclick="return bb(\'[b]\', \'\', \''+textarea_id+'\')" '+bbstyle+'="">
</a>',
'<a href="#" onclick="return bb(\'[i]\', \'\', \''+textarea_id+'\')" '+bbstyle+'="">
</a>',
'<a href="#" onclick="return bb(\'[s]\', \'\', \''+textarea_id+'\')" '+bbstyle+'="">
</a>',
'<a href="#" onclick="return bb(\'[u]\', \'\', \''+textarea_id+'\')" '+bbstyle+'="">
</a>',
'<a href="#" onclick="return bbs(\'size\', \''+textarea_id+'\')" '+bbstyle+'="">[size]</a>',
'<a href="#" onclick="return bbs(\'color\', \''+textarea_id+'\')" '+bbstyle+'="">[color]</a>',
'<a href="#" onclick="return bbs(\'img\', \''+textarea_id+'\')" '+bbstyle+'="">[img]</a>',
'<a href="#" onclick="return bbs(\'align\', \''+textarea_id+'\')" '+bbstyle+'="">[align]</a>'
];
bbcodes = '<div id="editor_buttons_'+textarea_id+'">'+bbtags.join(' ')+'</div>';
area.insertAdjacentHTML("beforeBegin", bbcodes);
var bb = document.getElementById('editor_buttons_'+textarea_id);
bb.style.background = '#EFEFEF';
bb.style.width = '522px';
bb.style.height = '24px';
bb.style.border = '1px solid #CCCCCC';
bb.style.padding = '0';
bb.style.margin = '0';
area.style.width = '524px';
area.style.border = '1px solid #CCCCCC';
area.style.padding = '0';
area.style.margin = '0';
area.style.borderTop = '0';
area.style.minHeight = '200px';
}
function bbs(tag, textarea_id){
switch(tag){
case 'size':
prm = prompt('Размер шрифта?',3)
if(prm != null) {
bb('[size='+prm+']', '[/size]', textarea_id);
}
break;
case 'color':
prm = prompt('Цвет шрифта?', '#000')
if(prm != null) {
bb('[color='+prm+']', '', textarea_id);
}
break;
case 'img':
prm = prompt('Ссылка на изображения?', 'http://')
if(prm != null) {
bb('[img='+prm+']', '[/img]', textarea_id);
}
break;
case 'align':
prm = prompt('Выравнивания?', 'center')
if(prm != null) {
bb('[align='+prm+']', '[/align]', textarea_id);
}
break;
}
return false;
}
function bb(open, close, textarea_id){
Open = open;
Close = close;
var doc = document.getElementById(textarea_id);
doc.focus();
if (window.attachEvent && navigator.userAgent.indexOf('Opera') === -1)
{
var s = document.selection.createRange ();
if(s)
{
var l = s.text.length;
s.text = Open + s.text + Close;
s.moveEnd("character", -Close.length);
s.moveStart("character", -l);
s.select();
}
}
else
{
var ss = doc.scrollTop;
sel1 = doc.value.substr(0, doc.selectionStart);
sel2 = doc.value.substr(doc.selectionEnd);
sel = doc.value.substr(doc.selectionStart, doc.selectionEnd - doc.selectionStart);
doc.value = sel1 + Open + sel + Close + sel2;
doc.selectionStart = sel1.length + Open.length;
doc.selectionEnd = doc.selectionStart + sel.length;
doc.scrollTop = ss;
}
return false;
}[/JS]
Функция editor() - создаёт блок с верху с тегами и добавляет стили к этому блоки и textarea
Функция bbs() - Выводит сообщения с полем для ввода значений в такие теги как img, align и подобные.
Функция bb() - Вставляет теги в textarea.
Ну и сам html и пример работы.
<textarea id="text"></textarea>
<script>editor('text');</script>
Всё проще чем казалось. ;)