1

Хочу сделать лёгкий визуальный редактор текста. Для этого использовал стандартную функцию добавления BB кодов.

$(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 src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<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>

Проблема в том, что если выделенный текст уже находится в [b]...[/b], то при повторном нажатии оно снова установит [b]...[/b], а нужно чтобы [/b]...[b]. Т.е. чтобы оно не вставляло элемент в элемент, а делало исключение.

Пример, для тех кто не понял:

Вот у нас есть текст с BB:

Люб[b]ой текст, где мы встав[/b]или код.

При выделении текста, который находится уже в [b]...[/b], оно сделает так:

Люб[b]ой текст, [b]где[/b] мы встав[/b]или код.

А нужно, чтобы было так:

Люб[b]ой текст, [/b]где[b] мы встав[/b]или код.
2
  • А почему не использовать уже готовые решения?
    – Shnur
    22 июн 2017 в 14:55
  • @Shnur, ну тогда уже и весь дизайн можно готовый скачать. И PHP у SO взять, чтобы вообще не напрягаться :)
    – Yuri
    22 июн 2017 в 18:22

1 ответ 1

3

Решение может быть таким:

  1. Находим ближайшие справа к выделенному тексту подстроки [b] и [/b].
  2. В зависимости от того, какая из них ближе, определяем, находится ли выделенный текст внутри тега.

В примере ниже добавление жирности происходит с помощью комбинации CtrlB (используется библиотека Mousetrap).

Для удобной замены выделенного текста используется библиотека Rangy Inputs.

Mousetrap.bind('ctrl+b', function() {
  let textarea = $('textarea');
  let text = textarea.val();

  let selection = textarea.getSelection();
  let indexOpen = text.indexOf('[b]', selection.end);
  let indexClose = text.indexOf('[/b]', selection.end);

  let direct = indexClose === -1 ||
    indexOpen !== -1 && indexClose !== -1 && indexOpen < indexClose;
  let appendBefore = direct ? '[b]' : '[/b]';
  let appendAfter = direct ? '[/b]' : '[b]';
  textarea.replaceSelectedText(appendBefore + selection.text + appendAfter);
});
textarea {
  height: 200px;
  width: 500px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mousetrap/1.6.1/mousetrap.min.js"></script>
<script src="https://rawgit.com/timdown/rangyinputs/master/rangyinputs-jquery.js"></script>

<textarea class="mousetrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea>

1
  • 1
    Молодец, спасибо :)
    – Yuri
    22 июн 2017 в 18:24

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.