Отступ выделенного текста 4 пробела

Я хочу сделать отступ для выделенного текста в <textarea> на 4 пробела, как это делает StackOverflow для кода, используя jQuery. Я делаю это, чтобы создать текстовый редактор, похожий на SO, но только с базовой функциональностью.

Мне не нужны ссылки или предложения на готовые редакторы; У меня есть все, что я хочу, но моя проблема выше. Может ли кто-нибудь подсказать, как сделать отступ для выделенного текста или какие-нибудь фрагменты кода?

Спасибо.


jquery markdown selection indentation
person Bojangles    schedule 16.07.2011    source источник

Ответы (2)


arrow_upward
5
arrow_downward 

function indentSelection() {
    var selection = $(this).getSelection().text;
    var textarea = $(this);
    var result = '';
    var lines = selection.split('\n');
    var space = '    ';
    for(var i = 0; i < lines.length; i++)
    {
        result += space + lines[i] + '\n';
    }
    var new_text = textarea.val().split(selection).join(result);
    textarea.val(new_text);
}

Должен сделать это. Пример получения выделенного текста (здесь он был сокращен) см. в Как получить выделенный текст в текстовой области?

person marc    schedule 16.07.2011
comment
Большое спасибо, марк. Проблема, с которой я столкнулся сейчас, заключается в том, что window.getSelection() и друзья (здесь: mark.koli.ch/2009/09/) не будет выделять текст внутри моего текстового поля. - person Bojangles; 16.07.2011
comment
Упс. Не беспокойтесь — теперь все отсортировано благодаря этому плагину jQuery: github.com/localhost/jquery-fieldselection. Тем не менее, большое спасибо за вашу помощь - без этой отправной точки я бы никуда. - person Bojangles; 16.07.2011
comment
Кажется, я говорил слишком рано. У меня есть две проблемы: 1) Новая строка добавляется после окончания выделения с отступом и, что более важно, 2) я не могу сделать отступ для выделенного текста, который был введен, я могу сделать отступ только для текста, который был либо добавлен JS или был в текстовой области в начале. - person Bojangles; 16.07.2011
comment
Не могли бы вы настроить пример на jsFiddle? - person marc; 16.07.2011
comment
Конечно :-) Во-первых, попробуйте просто выделить текст, который уже есть; он имеет отступы, но с запасной новой строкой после него. Теперь, если вы введете что-нибудь в текстовое поле, оно больше не будет работать. Ошибки не выводятся. jsfiddle.net/jamwaffles/zvqy5 - person Bojangles; 16.07.2011
comment
Обновил его, мне пришлось использовать val() вместо text(), потому что text() всегда так, как он был инициализирован. см. jsfiddle.net/zvqy5/22 - person marc; 16.07.2011
comment
Большое спасибо, марк. Я заметил /22 в конце URL-адреса JSFiddle — спасибо за усилия! - person Bojangles; 16.07.2011

arrow_upward
1
arrow_downward

Я бы использовал для этого регулярное выражение replace(). Просто замените новую строку на новую строку плюс четыре пробела:

function indentSelection(textarea) {
  $(textarea).val(
        $(textarea).val().substring(0, textarea.selectionStart)
          + $(textarea).getSelection().text.replace(/\n/m,'    \n')
          + $(textarea).val().substring(textarea.selectionEnd)
   );
}
person Spudley    schedule 16.07.2011