ContentEditable iframe 中的自动链接 URL

我有一个内容可编辑的 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);
        });

    }

相关文章