Как найти главный родительский элемент выделения текста?

Question

У меня есть много удовлетворительных div.

Когда я выбираю текст с помощью hightlighting внутри contenteditable div, я хочу получить контентный элемент div.

Для Exemple:

<div contenteditable="true"> 

Hello World, 

<i>this is <b>a dog</b> in the garden</i> 

Thank you very much 

</div> 

Поэтому, когда я выбираю текст «собака», выделив, я хочу, чтобы получить contenteditable элемент DIV для того, чтобы знать, какие contenteditable ДИВ я использовал.

Идея?

Edit:

Я сделал этот код, но он не идеален:

var selection = window.getSelection(); 

    var node = selection.anchorNode; 

    for(var i = 0; i < 50; i++) 
    { 
     node = node.parentNode; 

     if(node.getAttribute("contenteditable") == "true") 
     { 
      console.log("found"); 
      break; 
     } 
    } 

Answer 1

Вам нужно событие, чтобы стрелять после того, как текст будет выделен. Unfortunatley, нет события onhighlight, поэтому вы должны использовать что-то вроде onmouseup.

Далее вам нужен способ добавить слушателей событий ко всем вашим contenteditable div. Один из способов использования - document.querySelectorAll(). Но вам может быть проще добавить одного прослушивателя событий к «родительскому» из этих divs и продолжить дальше с инструкциями ниже.

Слушатель событий для mouseup предоставит объект события. См. https://developer.mozilla.org/en-US/docs/Web/Events/mouseup. Этот объект имеет значение currentTarget, которое даст вам элемент, в котором произошло событие mouseup, которое, в свою очередь, является элементом, в котором произошло выделение.

Answer 2

Этот вопрос, кажется, уже спрашивали:

javascript to get paragraph of selected text in web page

Вот еще один пример:

http://www.codetoad.com/javascript_get_selected_text.html

Answer 3

Я думаю, что предыдущие ответы более-усложняя вопросы.

Это то же самое, независимо от того, выбираете ли вы текст или просто щелкаете по элементу.

Вы должны быть в состоянии определить текущий элемент, на который вы нажали или нажали клавишу (в противном случае я не вижу, как вы можете разумно работать с контенту).

Предполагая, что вы можете сделать это, все, что вам нужно сделать, это вернуться из CurrentElm к родителю, который имеет contenteditable атрибут с петлей в то время - в то время как Elm.contenteditable = истина {Elm = Elm.parent}

!

Я признаюсь, что не предоставляю полную информацию о программировании, но могу, если вам это нужно.

Первый вопрос заключается в том, чтобы идентифицировать CurrentElm на mouseclick или keypress.

Если вы не можете этого сделать, вернитесь ко мне, и я объясню - остальное станет легче.