Совсем недавно во время работы над очередным проектом мне понадобился простенький редактор bb кодов.
Немного подумав и поискав по гуглу, я написал свой, наверное проще уже некуда… Редактор требует для работы подключенной библиотеки Jquery.
Публикую его здесь, может кому нибудь пригодится.
HTML код редактора выглядит следующим образом:
Естественно возможно любое количество сылок, кнопочек. то как они будут оформлены, зависит исключительно от Вашей фантазии CSS в помощь.
Ниже привожу JavaScript код. Который отвечает за обработку нажатия на кнопки вставки тегов.
Немного подумав и поискав по гуглу, я написал свой, наверное проще уже некуда… Редактор требует для работы подключенной библиотеки Jquery.
Публикую его здесь, может кому нибудь пригодится.
HTML код редактора выглядит следующим образом:
<div class="bb_bar">
<a href="#" alt="b">Жирный</a>
<a href="#" alt="i">Курсив</a>
<a href="#" alt="u">Подчеркнутый</a>
<a href="#" alt='a[href=""]'>Ссылка</a>
</div>
<textarea id="user_text"></textarea>
Естественно возможно любое количество сылок, кнопочек. то как они будут оформлены, зависит исключительно от Вашей фантазии CSS в помощь.
Ниже привожу JavaScript код. Который отвечает за обработку нажатия на кнопки вставки тегов.
<script>
$(document).ready(function(){
$('.bb_bar a').click(function() {
var button_id = attribs = $(this).attr("alt");
button_id = button_id.replace(/\[.*\]/, '');
if (/\[.*\]/.test(attribs)) { attribs = attribs.replace(/.*\[(.*)\]/, ' $1'); } else attribs = '';
var start = '['+button_id+attribs+']';
var end = '[/'+button_id+']';
insert(start, end);
return false;
});
});
function insert(start, end) {
element = document.getElementById('user_text');
if (document.selection) {
element.focus();
sel = document.selection.createRange();
sel.text = start + sel.text + end;
} else if (element.selectionStart || element.selectionStart == '0') {
element.focus();
var startPos = element.selectionStart;
var endPos = element.selectionEnd;
element.value = element.value.substring(0, startPos) + start + element.value.substring(startPos, endPos) + end + element.value.substring(endPos, element.value.length);
} else {
element.value += start + end;
}
}
</script>
* This source code was highlighted with Source Code Highlighter.
Вот собственно и весь код.
Работающий пример
P.S. (11.10.09)
Этот код (с небольшими дополнениями оформленный как плагин для jQuery)