Pull to refresh

простейший редактор bb кодов

Reading time2 min
Views8.9K
Совсем недавно во время работы над очередным проектом мне понадобился простенький редактор bb кодов.
Немного подумав и поискав по гуглу, я написал свой, наверное проще уже некуда… Редактор требует для работы подключенной библиотеки 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)
Tags:
Hubs:
Total votes 43: ↑33 and ↓10+23
Comments59

Articles