Добавление тегов в textarea по клику

07.05.2020

Не всегда целесообразно добавлять в проект wysiwyg редактор, но все же требуется несколько базовых возможностей. Например, выделение текста жирным.

Идея довольно простая: размещаем на форме поле ввода textarea, (можно и input, но это будет не удобно), а дальше добавляем пару кнопок, при нажатии на которые выделенный текст будет обрамляться тегами параграфа (p) или выделения (b). Также будет пример того, как вставлять отдельный текст в место где установлен курсор.

HTML

Кнопки и поле ввода:

 
    <div>
        <a href="#" class="paragraph" title="Paragraph">
            <i class="fas fa-paragraph"></i>
        </a>
    </div>
    <div>
        <a href="#" class="bold" title="Bold">
            <i class="fas fa-bold"></i>
        </a>
    </div>
    <div>
        <a href="#" class="list_item" title="LI">
            <i class="fas fa-stream"></i>
        </a>
    </div>

    <textarea id="text" style="width: 100%; height: 500px;" aria-invalid="false"></textarea>

JavaScript

Есть две функции:
wrapTag - добавляет обертку для выбранного текста, если ничего не выделено, то никаких изменений не произойдет.
addTag - добавляет текст у указанное курсором место. 

 
    function wrapTag(open, close)
    {
        var control = getActiveTextarea();
        var start = control.selectionStart;
        var end = control.selectionEnd;
        if (start != end)
        {
            var text = $(control).val();
            $(control).val(text.substring(0, start) + open + text.substring(start, end) + close + text.substring(end));
            $(control).focus();
            var sel = end + (open + close).length;
            control.setSelectionRange(sel, sel);
        }
        return false;
    }

    function addTag(tag)
    {
        var control = getActiveTextarea();
        var start = control.selectionStart;
        var pos = start + tag.length;

        var text = $(control).val();
        $(control).val(text.substring(0, start) + tag + text.substring(start));
        $(control).focus();
        
        control.setSelectionRange(pos, pos);

        return false;
    }


    $('#soControls .paragraph').on('click', function(event){
        event.preventDefault();
        return wrapTag('<p>', '</p>');
    });
    $('#soControls .bold').on('click', function(event){
        event.preventDefault();
        return wrapTag('<b>', '</b>');
    });
    $('#soControls .list_item').on('click', function(event){
        event.preventDefault();
        return addTag('<li><p>TEXT</p></li>');
    });


    // При клике на кнопки не снимаем фокус с textarea.
    $('#soControls a').on('mousedown', function() {
        return false;
    });

На доработку

Есть минус - не поддерживается отмена последнего события (ctrl + z)

Также было бы не плохо сделать поддержку горячих клавиш, например, ctrl + b для выделения жирным.

Категории: Web, JavaScript
Пометки: Получение выделенного текста в textarea, wysiwyg редактор
Яндекс.Метрика