ContentEditable Iframe中的自动链接url

我有一个内容可编辑的iframe我想自动链接它，如： 我的内容可编辑的iframe看起来像

我试过在前面提到的这个问题中使用正则表达式。 我在这个问题中使用的function工作正常，但实际上它将取代所有链接，包括标签中的链接（IMG，现有的A HREF）。

但我不想使用regx如果我使用regx转换发生时，我点击任何提交或保存按钮。

当用户在内容可编辑的iframe中粘贴url时，它应自动将任何链接转换为超链接

我也试过这个小提琴但是:(不能得到这个

HTML

我已经尝试过此资源，但无法找到如何解决内容可编辑的iframe问题。 也许这对于满足可疑的div

在contenteditable jQuery中 自动链接URL ：将文本URL转换为链接作为键入

任何人都可以帮助我内容可编辑的iframe autolinking谢谢。

Answer 1

最后它的工作和感谢@Tim Down的代码和回复

这就是我所做的 – 在内容可编辑的iframe中自动链接

 autoAppLink: function (Iframe) { var saveSelection, restoreSelection; if (window.getSelection && document.createRange) { saveSelection = function (containerEl) { var range = iframe[0].contentWindow.getSelection().getRangeAt(0); var preSelectionRange = range.cloneRange(); preSelectionRange.selectNodeContents(containerEl); preSelectionRange.setEnd(range.startContainer, range.startOffset); var start = preSelectionRange.toString().length; return { start: start, end: start + range.toString().length } }; restoreSelection = function (containerEl, savedSel) { var charIndex = 0, range = document.createRange(); range.setStart(containerEl, 0); range.collapse(true); var nodeStack = [containerEl], node, foundStart = false, stop = false; while (!stop && (node = nodeStack.pop())) { if (node.nodeType == 3) { var nextCharIndex = charIndex + node.length; if (!foundStart && savedSel.start >= charIndex && savedSel.start <= nextCharIndex) { range.setStart(node, savedSel.start - charIndex); foundStart = true; } if (foundStart && savedSel.end >= charIndex && savedSel.end <= nextCharIndex) { range.setEnd(node, savedSel.end - charIndex); stop = true; } charIndex = nextCharIndex; } else { var i = node.childNodes.length; while (i--) { nodeStack.push(node.childNodes[i]); } } } var sel = iframe[0].contentWindow.getSelection(); sel.removeAllRanges(); sel.addRange(range); } } else if (document.selection) { saveSelection = function (containerEl) { var selectedTextRange = document.selection.createRange(); var preSelectionTextRange = document.body.createTextRange(); preSelectionTextRange.moveToElementText(containerEl); preSelectionTextRange.setEndPoint("EndToStart", selectedTextRange); var start = preSelectionTextRange.text.length; return { start: start, end: start + selectedTextRange.text.length } }; restoreSelection = function (containerEl, savedSel) { var textRange = document.body.createTextRange(); textRange.moveToElementText(containerEl); textRange.collapse(true); textRange.moveEnd("character", savedSel.end); textRange.moveStart("character", savedSel.start); textRange.select(); }; } function createLink(matchedTextNode) { var el = document.createElement("a"); el.href = matchedTextNode.data; el.target = "_blank"; el.appendChild(matchedTextNode); return el; } function shouldLinkifyContents(el) { return el.tagName != "A"; } function surroundInElement(el, regex, surrounderCreateFunc, shouldSurroundFunc) { var child = el.lastChild; while (child) { if (child.nodeType == 1 && shouldSurroundFunc(el)) { surroundInElement(child, regex, createLink, shouldSurroundFunc); } else if (child.nodeType == 3) { surroundMatchingText(child, regex, surrounderCreateFunc); } child = child.previousSibling; } } function surroundMatchingText(textNode, regex, surrounderCreateFunc) { var parent = textNode.parentNode; var result, surroundingNode, matchedTextNode, matchLength, matchedText; while (textNode && (result = regex.exec(textNode.data))) { matchedTextNode = textNode.splitText(result.index); matchedText = result[0]; matchLength = matchedText.length; textNode = (matchedTextNode.length > matchLength) ? matchedTextNode.splitText(matchLength) : null; surroundingNode = surrounderCreateFunc(matchedTextNode.cloneNode(true)); parent.insertBefore(surroundingNode, matchedTextNode); parent.removeChild(matchedTextNode); } } var iframe = Iframe, textbox = iframe.contents().find("body")[0]; var urlRegex = /http(s?):\/\/($|[^ ]+)/; function updateLinks() { var savedSelection = saveSelection(textbox); surroundInElement(textbox, urlRegex, createLink, shouldLinkifyContents); restoreSelection(textbox, savedSelection); } var $textbox = $(textbox); $textbox.focus(); var keyTimer = null, keyDelay = 1000; $textbox.keyup(function () { if (keyTimer) { window.clearTimeout(keyTimer); } keyTimer = window.setTimeout(function () { updateLinks(); keyTimer = null; }, keyDelay); }); }