1

我正在使用这个脚本来检测粘贴到 contenteditable div 中的 youtube URL 并替换为可嵌入代码。

这在粘贴纯文本 youtube URL 时有效，但它不会检测或替换作为可点击链接粘贴的 URL。

如何修改代码以替换纯文本 youtube 链接和粘贴的可点击链接？

$.Redactor.fn.formatLinkify = function(protocol, convertLinks, convertImageLinks, convertVideoLinks)
{
    var url1 = /(^|<|\s)(www\..+?\..+?)(\s|>|$)/g,
        url2 = /(^|<|\s)(((https?|ftp):\/\/|mailto:).+?)(\s|>|$)/g,
        urlImage = /(https?:\/\/.*\.(?:png|jpg|jpeg|gif))/gi,
        urlYoutube = /.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;

    var childNodes = (this.$editor ? this.$editor.get(0) : this).childNodes, i = childNodes.length;
    while (i--)
    {
        var n = childNodes[i];
        if (n.nodeType === 3)
        {
            var html = n.nodeValue;

            // youtube
            if (convertVideoLinks && html && html.match(urlYoutube))
            {
                html = html.replace(urlYoutube, '<iframe width="560" height="315" src="//www.youtube.com/embed/$2" frameborder="0" allowfullscreen></iframe>');
                $(n).after(html).remove();
            }

            // image
            else if (convertImageLinks && html && html.match(urlImage))
            {
                html = html.replace(urlImage, '<img src="$1">');
                $(n).after(html).remove();
            }

            // link
            else if (convertLinks && html && (html.match(url1) || html.match(url2)))
            {
                html = html.replace(/&/g, '&amp;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;')
                .replace(url1, '$1<a href="' + protocol + '$2">$2</a>$3')
                .replace(url2, '$1<a href="$2">$2</a>$5');

                $(n).after(html).remove();
            }
        }
        else if (n.nodeType === 1 && !/^(a|button|textarea)$/i.test(n.tagName))
        {
            $.Redactor.fn.formatLinkify.call(n, protocol, convertLinks, convertImageLinks, convertVideoLinks);
        }
    }
};
4

1 回答 1

2

<a>由于您从该行的递归调用中排除了锚（标签），因此没有处理任何链接：

else if (n.nodeType === 1 && !/^(a|button|textarea)$/i.test(n.tagName))

您应该通过将正则表达式更改为来允许它们

/^(button|textarea)$/i

或使用其他一些条件来确保href处理链接（或其属性）。

例如，如果您遇到一个链接，您可以href针对urlYoutuberegEx 测试它的属性。

有关更多详细信息，请参阅此jsFiddle。

于 2013-08-14T04:22:06.943 回答