С элементом contenteditable, как я могу заменить выделенный контент на свой собственный html?
Как заменить выделенный текст на html в контентном элементе?
Ответ 1
См. здесь для работы jsFiddle: http://jsfiddle.net/dKaJ3/2/
function getSelectionHtml() {
var html = "";
if (typeof window.getSelection != "undefined") {
var sel = window.getSelection();
if (sel.rangeCount) {
var container = document.createElement("div");
for (var i = 0, len = sel.rangeCount; i < len; ++i) {
container.appendChild(sel.getRangeAt(i).cloneContents());
}
html = container.innerHTML;
}
} else if (typeof document.selection != "undefined") {
if (document.selection.type == "Text") {
html = document.selection.createRange().htmlText;
}
}
alert(html);
}
Код, взятый из Tim Down: Вернуть HTML из выделенного пользователем текста
Ответ 2
Чтобы получить выбранный HTML, вы можете использовать функцию, которую я написал для этого вопроса. Чтобы заменить выбор своим собственным HTML, вы можете использовать эту функцию. Здесь версия функции replacer, которая вставляет строку HTML вместо DOM node:
function replaceSelectionWithHtml(html) {
var range;
if (window.getSelection && window.getSelection().getRangeAt) {
range = window.getSelection().getRangeAt(0);
range.deleteContents();
var div = document.createElement("div");
div.innerHTML = html;
var frag = document.createDocumentFragment(), child;
while ( (child = div.firstChild) ) {
frag.appendChild(child);
}
range.insertNode(frag);
} else if (document.selection && document.selection.createRange) {
range = document.selection.createRange();
range.pasteHTML(html);
}
}
replaceSelectionWithHtml("<b>REPLACEMENT HTML</b>");