ContentEditable iframe 中的自动链接 URL [英] Autolink URL in ContentEditable Iframe
问题描述
我有一个内容可编辑的 Iframe 我想自动链接它，例如:我的内容可编辑 Iframe 看起来像
I have a content editable Iframe I want to autolink it, like : My content editable Iframe look like
我尝试在这个 问题我之前问过.我在这个问题中使用的功能工作正常，但实际上它将替换所有链接，包括标签中的链接(IMG，现有的 A HREF).
i tried using regular expression in this Question i asked before. The function that i use in this question works fine, but actually it will replace all links including links in tags (IMG, existing A HREFs).
但我不想使用 regx，如果我使用 regx 转换会在我点击任何提交或保存按钮时发生.
But i dont want to use regx if i use regx convertion happens when i click any submit or save button.
当用户在内容可编辑的 iframe 中粘贴 url 时，它应该自动将任何链接转换为超链接
我也试过这个 Fiddle 但是:( 不能得到这个
i tried with this Fiddle too but :( can't get this
HTML
<div class="workzone" style="height: 150px;"><iframe id="idContent" width="600" height="280"></iframe></div>
我已尝试过此资源，但找不到如何为内容可编辑的 iframe 解决此问题.也许这是 contenteditable div
I have tried this resource but could'nt find how to fix this for a content editable Iframe. Perhaps this for contenteditable div
contenteditable 中的自动链接 URLjQuery:将文本 URL 转换为链接作为输入
任何人都可以帮助我进行内容可编辑的 iframe 自动链接谢谢.
can anyone please help me with content editable Iframe autolinking Thanks.
推荐答案
终于成功了，感谢@Tim Down 的代码和回复
Finally its working and thanks to @Tim Down for his code and replies
这就是我所做的 - 在内容可编辑的 Iframe 中自动链接
This is what i did - Autolink in an content editable 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);
});
}
这篇关于ContentEditable iframe 中的自动链接 URL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
