Как получить содержимое параграфа в родители с contenteditable=true?

Question

[marenco_victor]

Добрый день!

Есть контейнер
<div contenteditable></div>

при нажатии клавиши enter в нем добавляется тег <p></p>

как мне получить содержимое того или иного тега в котором сейчас установлена каретка?

Answer 1

[Владимир Проскурин]

https://jsfiddle.net/19aov30p/
т.е. получаете getRangeAt из window.getSelection(), а в нем в объекте range.commonAncestorContainer хранится текущий элемент, который обычно текстовый нод. У этого элемента получаете родителя через parentNode - это и будет ваш элемент.

Comments

[marenco_victor]

Это прекрасно! спасибо вам огромное!

Answer 2

[Ihor Bratukh]

Никогда не работал с contenteditable блоками, может и есть способ получше, но я предложил бы парсинг html из строки (содержимого блока)

Тестовый html, который был в блоке:
<p data-test="512">WDaW</p>

jQuery

function parseHTML(text, callback) {
	var $html = $($.parseHTML('<div>'+ text +'</div>'));
	if (callback) callback($html);
	return $html.children().unwrap();
}

parseHTML($('#contenteditable').text(), function($html) {
	var $p = $('p', $html);
	console.log({
		p: $p.text(),
		data: $p.data('test'),
		html: $html.html()
	});
});

Pure JavaScript

function parseHTML(text, callback) {
	var html = function() {
		var template = document.implementation.createHTMLDocument();
		template.body.innerHTML = text;
		return template.body.children;
	}();
	if (callback) callback(html[0]);
	return html;
}

parseHTML(document.getElementById('contenteditable').innerText, function(html) {
	console.log({
		p: html.innerText,
		data: html.getAttribute('data-test'),
		html: html.outerHTML
	});
});

Comments

[marenco_victor]

благодарю вас за ответ!