Не всегда целесообразно добавлять в проект wysiwyg редактор, но все же требуется несколько базовых возможностей. Например, выделение текста жирным.
Добавление тегов в textarea по клику
07.05.2020
Идея довольно простая: размещаем на форме поле ввода 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 для выделения жирным.