问题描述
我有一个内容可编辑的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它应该自动将任何链接转换为超链接
我试过这个但是:(不能得到这个）
i tried with this Fiddle too but :( can't get this
Html
< div class =workzonestyle =height：150px;>< iframe id =idContentwidth =600height =280>< / iframe>< / div>
我已经尝试过此资源，但无法找到如何修复内容可编辑的iframe。也许这对于可疑的div
I have tried this resource but could'nt find how to fix this for a content editable Iframe. Perhaps this for contenteditable div
任何人都可以帮助我使用内容可编辑的iframe autolinking谢谢。
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中的自动链接网址的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！