jQuery в помощь: BBCode html-toolbar средствами jCaret

Оригинал статьи: Janko   СС-лицензия:

Опубликовано 27.05.10  /  Автор перевода: Иван Саломатин

Комментариев 11

Несмотря на то, что многие пользователи не согласны с тем, что продукты Microsoft могут служить примером удачного дизайна, всплывающая мини-панель инструментов (minibar, mini-toolbar), впервые появившаяся в Office 2007 стала очень удачным дизайн-решением. Всплывающая мини-панель – это разновидность панели инструментов, которая разворачивается непосредственно около выделенного участка текста, что позволяет пользователю очень быстро осуществлять действия над выделенным фрагментом.

В этой статье я показу, как с помощью замечательного j-Query плагина jCaret создать ВОТ ТАКОЕ всплывающее меню, содержащее bbcode-кнопки <b>, <i>, <ul> и <link> (прим. перев.: основываясь на демонстрируемой технике, остальные желаемые кнопки форматирования вы сможете добавить сами).

Как это работает

Когда пользователь выделяет фрагмент текста в текстовом поле <input>, над выделенным участком всплывает полупрозрачная панелька. Когда курсор наводится на тулбар, он становится непрозрачным. Панель исчезает в случае, если пользователь кликает в любом месте текстового поля или нажимает на кнопку самой панельки. 

Создаём разметку

Перво-наперво, формируем html-разметку. Она должна выглядеть следующим образом:

<textarea  id="description" rows="8"  cols="50"></textarea>
  <div  id="menu">
  <a href="#"  id="bold">b</a>
  <a href="#"  id="italic">i</a>
  <a href="#"  id="underline">u</a>
  <a href="#"  id="link">Link</a>
  </div>

Оформляем toolbar

Нам необходимо сделать так, чтобы наш мини-тулбар был полупрозрачным по-умолчанию и становился абсолютно непрозрачным при наведении на него указателя мыши.

#menu  {
  padding:5px; 
  background-color:#f5f5f5;
  background-color:rgba(245, 245, 245, 0.6);
  display:none; 
  position:absolute;
  top:0px;
  left:0px;
  overflow:hidden;
  border:solid 1px #929292;
  border-radius:3px;
  -moz-border-radius:3px;
  -webit-border-radius:3px;
  box-shadow: 5px 5px 5px #888;
  -moz-box-shadow: 1px 1px 3px #555;
  -webkit-box-shadow: 5px 5px 5px #888;
  }
  #menu:hover  {background-color:rgba(245, 245, 245, 1);}

Появление и исчезновение

Для того, чтобы контролировать положение панели, нам следует отследить позицию курсора и использовать координаты X и Y, чтобы задать положение контейнера, содержащего наш тулбар. Чтобы заставить его появляться при выделении пользователем фрагмента текста, мы задействуем событие .select(). Также, придется прибегнуть к помощи события .mousedown(), чтобы спрятать контейнер, если пользователь совершил клик в каком-нибудь другом месте текстовой области.

$(document).ready(function() { 
  //создаём  переменные для координат точки курсора
  var mouseX = 0;
  var mouseY = 0;
  
  $("#description").mousemove(function(e)  {
  // отслеживаем позицию курсора
  mouseX = e.pageX;
  mouseY = e.pageY;
  });
  
  // Прячем тулбар
  $("#description").mousedown(function() {
  $("#menu").fadeOut("1000");
  });
  
  $("#description").select(function() {
  // вычисляем  позицию курсора и показываем тулбар при наступлении события .select 
  $("#menu").css("top",  mouseY - 30)
  .css("left", mouseX +  10).fadeIn("1000");
  });
});

Нажатие на кнопку

Теперь, когда мы знаем, как показать/скрыть нашу панельку, пришло время озадачиться реализацией функциональной части. Если мы желаем сделать выделенный участок текста полужирным, мы можем заключить его в теги <strong> и </strong>  (конечно, правильнее реализовать это с помощью тега <span> и соответствующего css-класса, но в целях упрощения урока, здесь будет использоваться именно тег <strong>).

function wrapText(startText, endText){
  // находим  и помещаем в переменную текст, расположенный до начала выделенного фрагмента
  var before =  $("#description").val().substring(0,  $("#description").caret().start);
  
  // находим и помещаем в переменную  текст, расположенный после выделенного фрагмента
  var after =  $("#description").val().substring($("#description").caret().end,  $("#description").val().length);
  
  // объединяем все фрагменты текста:  фрагмент до выделения, обрамляющие теги и выделенный фрагмент, а также фрагмент  после выделения
  $("#description").val(before  + startText + $("#description").caret().text + endText + after);
  }

Эта функция основывается на jQuery-плагине jCaret. Она заключает выделенный фрагмент в теги и присоединяет к нему предществующий и последующий фрагменты. Довольно просто, не так ли?! Осталось только прописать, какими тегами функции wrapText() следует обрамлять выделенный фрагмент при наступлении события .click на кнопке bbcode-панели.

$("#bold").click(function()  {
  wrapText("<strong>",  "</strong>");
  $("#menu").fadeOut("1000");
  });
  $("#italic").click(function()  {
  wrapText("<em>",  "</em>");
  $("#menu").fadeOut("1000");
  });
  $("#underline").click(function()  {
  wrapText("<u>",  "</u>");
  $("#menu").fadeOut("1000");
  });
  $("#link").click(function()  {
  var url = prompt("Введите адрес ссылки:",  "http://");
  if (url != null)
  wrapText("<a href='" + url  + "'>", "</a>");
  $("#menu").fadeOut("1000");
  });

Обработка кликов по кнопкам <b>, <i> и <u> довольно проста: вызываем функцию wrapText(), передаём ей в параметрах открывающий и закрывающий теги и затем плавно скрываем наш минибар. А вот для кнопки с кнопкой <link> немного сложнее: тут нам прежде всего необходимо попросить пользователя ввести текст ссылки, затем поместить его в переменную, и только потом вызвать функцию wrapText().

Заключение

Регулярно используя Word, я порой ощущаю некоторую нехватку такой панельки при наборе текста на страницах веб-сайтов. Мне, например, очень бы хотелось, чтобы таким виджетом были оборудованы WYSIWYG редакторы, такие как TinyMCE. Тулбар можно с успехом использовать для контакт- и коммент-форм.

Приведённый в этой статье код – это не догма, а всего лишь один из примеров реализации самой идеи. Дорабатывайте и совершенствуйте его по своему усмотрению. Удачи!