Есть простой текст в div-блоке. Как при выделении фрагмента этого текста обернуть его в тэг ? Или как сделать то же самое, но при клике на кнопку, как в визуальном редакторе?
1 ответ
$(document).on("mouseup", ".test", function() {
styliString();
});
function styliString() {
if (window.getSelection() == '') {
return false;
}
var range = window.getSelection().getRangeAt(0);
var selectionContents = range.extractContents();
var span = document.createElement("span");
span.appendChild(selectionContents);
span.setAttribute("class", "selected");
span.style.backgroundColor = "yellow";
span.style.color = "green";
range.insertNode(span);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">
select me selet me select me select me. select me selet me select me select me. select me selet me select me select me. select me selet me select me select me. select me selet me select me select me. select me selet me select me select me.
</div>
Совместимость смотрите в описании .getSelection() и .getRangeAt()
-
Этот вариант можно как-то переделать под оборачивание тэгом по нажатию кнопки? А то я выделяю одну букву, и она оборачивается в 8 тэгов span. Хотелось бы, чтобы в один тэг. 13 мар 2018 в 20:58
-
конечно, вместо
$(document).on("mouseup", ".test", function() { styliString(); });
используйте$(document).on("click", ".btn-test", function() { styliString(); });
– Alex13 мар 2018 в 21:02 -
@ВикторПавлов по выделению в 8 тегов - при одном выделении выделенный текст оборачивается только одним
span
.– Alex13 мар 2018 в 21:05 -
Не работает, наверное потому, что выделение текста пропадает при клике на кнопку. 13 мар 2018 в 21:13
-