Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.10.2020, 17:52
Профессор
Отправить личное сообщение для Янковиц Посмотреть профиль Найти все сообщения от Янковиц
 
Регистрация: 17.11.2014
Сообщений: 362

Выделение текста contenteditable
Привет, хочу немного прокачать скилл на javascript. Делаю простенький WYSIWYG. Прошу помощи, как отловить событие завершения выделения?
1. Пробовал mouseup, но он пересекается с двойным кликом и кликом правой кнопкой мыши. Также mouseup плох тем, что если выделение начинаю в области редактора, а заканчиваю вне его, то event.target берётся вне редактора.
2. onselectionchange срабатывает на весь документ, так как работает только со всей страницей.

В сети ничего путного не нашел...

Последний раз редактировалось Янковиц, 23.10.2020 в 17:54.
Ответить с цитированием
  #2 (permalink)  
Старый 23.10.2020, 20:29
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 717

Использовать onselectionchange, а потом смотреть что выделили в интересующем вас элементе.
https://learn.javascript.ru/selection-range
https://learn.javascript.ru/range-textrange-selection
Ответить с цитированием
  #3 (permalink)  
Старый 23.10.2020, 20:37
Профессор
Отправить личное сообщение для Янковиц Посмотреть профиль Найти все сообщения от Янковиц
 
Регистрация: 17.11.2014
Сообщений: 362

Да, спасибо, я иду в этом направлении. Пытаюсь получить содержимое вместе с тегами.
Вот например такой текст: "<p>Привет я <b>но<i>вы</i>й</b> редактор</p>".
Если выделить через двойной клик слово новый, html будет вида но<i>вы</i>й, без тега <b>. Как это побороть?
Ответить с цитированием
  #4 (permalink)  
Старый 23.10.2020, 20:38
Профессор
Отправить личное сообщение для Янковиц Посмотреть профиль Найти все сообщения от Янковиц
 
Регистрация: 17.11.2014
Сообщений: 362

Делаю так:
if ( window.getSelection ) {
	var selection = window.getSelection();
} else if ( document.selection ){
	var selection = document.selection.createRange();
}
var range = selection.getRangeAt(0);

var div = document.createElement('div');
div.appendChild( range.cloneContents() );
console.log( div.innerHTML ); // двойной клик по  слову "новый" даёт результат: но<i>вы</i>й - не хватает тегов b
console.log( div.innerHTML ); // если выделить "я новый редактор", даёт результат: я <b>но<i>вы</i>й</b> редактор


есть ещё range.commonAncestorContainer, который:
console.log( range.commonAncestorContainer ); // двойной клик по  слову "новый" даёт результат: <b>но<i>вы</i>й</b> - то что нужно
console.log( range.commonAncestorContainer ); // если выделить "я новый редактор", даёт результат: <p>Привет я <b>но<i>вы</i>й</b> редактор</p>, а не выделение.

Я думал совместить эти две функции. range.commonAncestorContainer даёт ближайшего родителя. Затем в строке range.commonAncestorContainer искать подстроку div.innerHTML, и регуляркой вытаскивать ближайшие теги. Типа такого: (/<МОЯ_ПОДСТРОКА>/ig)


Но регулярки я, к сожалению, не знаю. Да и вообще, походит на какой-то костыль. Может есть более простое и элегантное решение?

Суть в том, чтобы получить html выделенного текста вместе с внешними тегами: и по двойному клику по слову, и обычным выделением группы слов.

Последний раз редактировалось Янковиц, 23.10.2020 в 20:57.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как с помощью скрипта высчитать ширину полосы прокрутки? LADYX Элементы интерфейса 35 13.11.2017 12:50
Переносы строк в div contenteditable при выделении текста NapalmRain Элементы интерфейса 13 19.08.2016 14:14
Отменить в выделение текста в таблице при кликах и вообще двойные клики отменить monkey_gelada Events/DOM/Window 1 21.08.2015 09:28
Textarea и выделение текста dima85 Общие вопросы Javascript 2 29.09.2014 13:48
Выделение текста в текстовом поле. Как снять выделение с пробела вконце? Roman Koff Events/DOM/Window 10 01.07.2010 16:48