Autolink URL in ContentEditable Iframe

问题

I have a content editable Iframe I want to autolink it, like :

My content editable Iframe look like

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).

But i dont want to use regx if i use regx convertion happens when i click any submit or save button.

When a user paste's a url in a content editable Iframe it should automatically convert any link to hyperlink

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>

I have tried this resource but could'nt find how to fix this for a content editable Iframe. Perhaps this for contenteditable div

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

can anyone please help me with content editable Iframe autolinking Thanks.

回答1:

Finally its working and thanks to @Tim Down for his code and replies

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

    }

来源：https://stackoverflow.com/questions/24301080/autolink-url-in-contenteditable-iframe