Devil198711,
редакторы по ссылке выше, содержат все необходимые вам решения, в том числе и на js, нужно только читать их код. |
contenteditable возвращение курсора в конец выделения
Devil198711,
возможно есть проще варианты
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script>
window.addEventListener('DOMContentLoaded', function() {
var myTextArea = document.querySelector('#myTextArea'),
but = document.querySelector('#but');
but.addEventListener('click', function() {
if(!window.getSelection().anchorNode) return;
var selection = window.getSelection().getRangeAt(0);
var selectedText = selection.extractContents();
var tagname = document.createElement('b');
tagname.appendChild(selectedText);
if(tagname.textContent.length) {
selection.insertNode(tagname);
var range = document.createRange();
range.setStart(tagname.childNodes[0], tagname.textContent.length);
range.collapse(true);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
}
else myTextArea.focus()
});
});
</script>
</head>
<body>
<div id="myTextArea" style="background: #ccc" contenteditable="true">
текст <br />ещё текст<br />и ещё
</div>
<br />
<input type="button" value="Вставить тег b" id="but">
</body>
</html>
|
Цитата:
Спасибо, но проблемы с вставкой тегов я решил уже, единственное что мне никак не поддается это вернуть выделение в прежнее положение при потере фокуса редактора. То есть когда я нажимаю на кнопку вставки ссылки появляется модальное окно с тремя полями форм (урл, текст ссылки, тайтл), и при установке курсора в любое поле редактор теряет фокус и ответственно забывает выделенный текст, вот я и не могу понять как при нажатии кнопки "вставить ссылку" заменить выделенный текст или вставить там где была каретка |
Devil198711,
не понимаю, разве код выше не решает ваши проблемы? что мешает сохранить выделение и вернуть обратно? код перед вами |
Devil198711,
медитировать здесь https://learn.javascript.ru/range-textrange-selection |
Цитата:
|
Всем спасибо за помощь, вот что у меня получилось
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="editor" style="border:1px dashed #999; color:#666; background:#EEE; padding:2px 5px; margin:10px 0;" contenteditable>
какой-то текст
</div>
<div>
<input onclick="setSelection()" type="button" value="Выделить">
<input onclick="saveSelection()" type="button" value="Сохранить выделение">
</div>
<script>
var wsEditor = document.getElementById('editor');
var wsSelection;
function setSelection() {
if (wsSelection) {
var sel = window.getSelection();
var rng = document.createRange();
rng.selectNode(wsEditor);
rng.setStart(wsSelection.startContainer, wsSelection.startOffset);
rng.setEnd(wsSelection.endContainer, wsSelection.endOffset);
sel.removeAllRanges();
sel.addRange(rng);
}
}
function saveSelection() {
wsEditor.focus()
var sel = window.getSelection();
if (sel.anchorNode) {
wsSelection = sel.getRangeAt(0);
}
}
</script>
</body>
|
Devil198711,
добавьте run в пост №17 [HTML run][/HTML] |
Подскажите как получить картинку которая в данный момент выделена
|
смотря как выделена.
event.target ссылка на объект вызвавший событие. |
| Часовой пояс GMT +3, время: 12:43. |