Как я могу получить HTML-код в contentEditable-DIV

Question

В contentEditable-DIV я пытаюсь получить HTML-код от strat-Position 0 до конечной позиции, где пользователь нажал.

<div id="MyEditableId" contentEditable="true"> 
    1. Some text 123. <span style="background-color: #0CF;">text 123</span> 456 <span style="background-color: #9F3;">2-> abc </span> 
    <br /> 
    <p> E.g. here is clicked: "click" Text after click </p> 
    <p></p> 
    <br /> 
    end of text. 
</div> 

Что-то вроде нижеследующего фрагмента кода, который доставляет текст от 0 до конца щелкнутого узла. Но мне нужен также HTML-код в contentEditable-DIV.

$('#MyEditableId').on('mouseup', function(event) { 
    var MyEditable = document.getElementById('MyEditableId'); 
    MyEditable.focus(); 
    range = document.createRange(); 

    // endOffset: It will be better the length of where actually was clicked, e.g. after 15-characters. But this.length will be also ok. 
    endOffset = $(this).length; 
    range.setStart(MyEditable.firstChild,0); 
    range.setEnd(event.target,endOffset); 
    var selection = window.getSelection(); 
    selection.addRange(range); 

    // Below I get the selected text from 0 to end of clicked node. But I need the selected HTML-Code from 0 to end of clicked position. 
    alert(window.getSelection()); 
}); 

Я ожидаю, что в результате чего-то выглядит следующим образом:

1. Some text 123. <span style="background-color: #0CF;">text 123</span> 456 <span style="background-color: #9F3;">2-> abc </span> 
    <br /> 
    <p> E.g. here is clicked: "click" 

Как я могу получить HTML-код вместо текста в моей contentEditable-DIV? Спасибо заранее.

Answer 1

Вы можете выбрать DIV и использовать его свойство innerHTML

http://jsfiddle.net/at917rss/

<div id="MyEditableId" contentEditable="true"> 
    1. Some text 123. <span style="background-color: #0CF;">text 123</span> 456 <span style="background-color: #9F3;">2-> abc </span> 
    <br /> 
    <p> E.g. here is clicked: "click" Text after click </p> 
    <p></p> 
    <br /> 
    end of text. 
</div> 

    $('#MyEditableId').on('mouseup', function(event) { 
     var MyEditable = document.getElementById('MyEditableId'); 
     MyEditable.focus(); 
     range = document.createRange(); 

     // endOffset: It will be better the length of where actually was clicked, e.g. after 15-characters. But this.length will be also ok. 
     endOffset = $(this).length; 
     range.setStart(MyEditable.firstChild,0); 
     range.setEnd(event.target,endOffset); 
     var selection = window.getSelection(); 
     selection.addRange(range); 

     // get html for your div 
     var myDiv = document.getElementById('MyEditableId'); 
     alert(myDiv.innerHTML); 
    }); 

Answer 2

Просто измените предупредительную строку в коде ниже один работает хорошо ..

alert($.trim($('<div>').append(range.cloneContents()).html())); 

Answer 3

Я просто просматривая документацию для Range и selection. Вы можете использовать extractContents() или cloneContents() метод, поддерживаемый Range объекта, как это в вашем случае Demo:

var fragment = window.getSelection().getRangeAt(0).extractContents(); 

Это автоматически получает первый диапазон, который пользователь выбрал. Хотя пользователи могут выбирать несколько диапазонов, удерживая клавишу «Ctrl». Это дает точное совпадение с позицией курсора для более простых случаев.

При этом есть некоторые оговорки. Оба метода extractContents() или cloneContents() возвращают documentFragment и документация четко говорится, что:

Слушатели событий, добавленные с помощью событий DOM не копируются в процессе клонирования. События атрибутов HTML дублируются, как и для метода клонирования DOM Core. Идентификаторы HTML-идентификатора также клонируются, что может привести к недействительным документом путем клонирования.

В сущности, фрагменты документа может содержать недопустимые HTML и поэтому вы не можете использовать все нормальные DOM как .html() в некоторых случаях.

Я нашел relevant SO post на получение позиции курсора на contentEditable элемента и наткнулся на TextRange Object (поддерживается в IE < 9) и имеет htmlText свойство, которое возвращает исходный HTML от выбора в качестве «действительного» HTML-фрагмента , Так что в этом случае вы могли бы сделать что-то вроде:

var fragment = document.selection.createTextRange().htmlText; 

Однако, так как большинство современных браузеров supportWindow.getSelection(), это хорошая практика, что вы используете его и построить на подходящие методы, которые есть в вашем распоряжении.Надеюсь, вы начнете в правильном направлении.

Sidenote - Кроме того, из docs:

с использованием объекта выбора в качестве аргумента window.alert будет вызывать метод ToString объекта