javascript - ContentEditable Iframe 中的自动链接 URL

Question

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

我尝试在此 Question 中使用正则表达式我之前问过。我在这个问题中使用的函数工作正常，但实际上它会替换所有链接，包括标签中的链接(IMG，现有的 A HREF)。

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

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

我试过这个Fiddle也是，但是 :( 不能得到这个

HTML

<div class="workzone" style="height: 150px;"><iframe id="idContent" width="600" height="280"></iframe></div>

我已经尝试过此资源，但找不到如何为内容可编辑的 iframe 修复此问题。也许这对于 contenteditable div

Autolink URL in contenteditable jQuery: Convert text URL to link as typing

谁能帮我解决内容可编辑的 Iframe 自动链接问题。

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);
        });

    }