Помогите написать текстовый редактор
Есть необходимость создать простой текстовый редактор на чистом js под chrome. При этом реализовать его надо без iframe а на div contenteditable.
потратил уже целый день на поиск решение как вернуть каретку в прежнее положение если кликаю по кнопке (ну к примеру bold) Помогите ПЛИЗ!!! |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#area{
border: 1px solid gray;
width: 500px;
height: 100px;
font-weight:
}
</style>
</head>
<body>
<div contenteditable id="area"></div>
font-weight: <button>bold</button>
<script>
document.querySelector('button').addEventListener('mouseup', function(){
document.querySelector('#area').focus();
});
</script>
|
j0hnik,
условно 5 слов, выделено третье, по клику на кнопку bold, это слово стало "жирным", а курсор встал после него. |
Цитата:
Спасибо частично помогло:) |
Цитата:
Можете редактор открыть (word например) и посмотреть как там. |
Цитата:
|
Цитата:
|
Цитата:
|
Devil198711,
на всякй случай 10 Best jQuery and HTML5 WYSIWYG Plugins |
У меня стоит задача написать редактор на чистом js, многое уже сделано, но вот вот при вызове модального окна для ввода данных о ссылкке происходит потеря фокуса выделенного текста. Вот мне и нужно после ввода данных вернуть фокус в прежнее место, как это работало с iframe
|
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 ссылка на объект вызвавший событие. |
Цитата:
|
Devil198711,
window.getSelection().anchorNode.querySelector('img')
|
Цитата:
|
Devil198711,
window.getSelection().anchorNode.querySelectorAll('img')[укажите номер нужной]
|
Цитата:
|
| Часовой пояс GMT +3, время: 13:37. |