使用execCommand 'createlink'添加target="_blank"属性

Question

我正在尝试为自定义 CMS 创建一个迷你所见即所得编辑器。它具有添加和删除链接的选项。它可以成功地添加链接，但希望有在超链接中添加 target="_blank" 的选项。如果可能的话，我也想能够添加 alt="" 和 title=""。

目前这是我的代码：

function addLink() {
    var linkURL = prompt('Enter a URL:', 'http://');
    editorWindow.document.execCommand('createlink', false, linkURL);
}

我已经寻找过，但似乎找不到解决方案。我看到的大部分解决方案都建议添加以下内容：

function addLink() {
    var linkURL = prompt('Enter a URL:', 'http://');
    var newLink = editorWindow.document.execCommand('createlink', false, linkURL);
    newLink.target = "_blank";
}

但是这似乎不起作用。有什么建议吗？

- thelos999

---

你真的想使用execCommand功能吗？为什么不简单地创建一个新的链接元素并将其添加到DOM中，甚至更好的方法是使用jQuery？另外，不要忘记转义用户可以输入的URL，以防止可能的XSS。 - Bart Enkelaar

谢谢回复。不太清楚该怎么做。我知道你可以使用 document.createElement('a'); 创建一个新元素，然后添加 setAttribute('target', '_blank');。唯一看不到的是如何将链接应用于已经突出显示的文本。 - thelos999

Answer 1

我能够找到一个解决方案。不确定这是否是正确的方法，但它可以工作。按照https://dev59.com/IG035IYBdhLWcg3wJcYv#5605841的建议，我在我的代码中使用了以下内容：

function addLink() {
    var linkURL = prompt('Enter a URL:', 'http://');
    var sText = editorWindow.document.getSelection();

    editorWindow.document.execCommand('insertHTML', false, '<a href="' + linkURL + '" target="_blank">' + sText + '</a>');
}

如果有其他人在寻找并偶然发现了这个问题……

- thelos999

---

在IE 11中，document.selection已经消失，而insertHTML仍然不受支持。 - Jim

你可以在正常的execCommand之后这样使用jQuery：$("a").attr("target","_blank"); 它只是将属性添加到每个锚点 - 或者你可以尝试针对特定的锚点...虽然有些丑陋，但它能够工作。 - Edd

Answer 2

如果在加粗或斜体之前使用insertHTML可能会出现问题。 我使用以下方法：

var url = 'example.com';
var selection = document.getSelection();
document.execCommand('createLink', true, url);
selection.anchorNode.parentElement.target = '_blank';

- Raphael

Answer 3

我知道这个帖子很旧了，但是让我发表一下我的看法，也许有人会觉得有用；) 我也在开发一个所见即所得的编辑器。当我尝试从FF中选择图像创建链接时，我发现接受的解决方案对我无效（getSelection().getRangeAt(0)返回图像的父div并将图像视为从未存在过），因此我想出了一个肮脏但有效的（我认为它是超级跨浏览器的）想法（使用jQuery）：

//somewhere before losing the focus:
sel = window.getSelection().getRangeAt(0);

//reselecting:
window.getSelection().addRange(sel);

//link:
document.execCommand('createLink', false, 'LINK_TO_CHANGE');
$('a[href="LINK_TO_CHANGE"').attr('target', '_blank');
//any other attr changes here
$('a[href="LINK_TO_CHANGE"').attr('href', theRealHref);

这是个好主意吗？它的效果很棒，而且非常简单^^

- Piotrek

---

你是一个非常聪明的人！我非常喜欢你...我很高兴你存在！祝你每天好运++！ - Ben Muircroft

Answer 4

由于没有直接的跨浏览器解决方案，一个跨浏览器的解决方法是在您的编辑器中编程附加一个事件处理程序到 a 元素上：

var aLinks = Array.prototype.slice.call(editorElement.querySelectorAll('a'));
aLinks.forEach(function(link) {
      link.addEventListener('click', function() {
          window.open(link.href, '_blank');
      }); 
});

- Tarun Dugar

Answer 5

似乎没有人提到根据规格，document必须处于设计模式：

document.designMode = "on";

那么以下代码应该可以正常工作：

var url = 'http://google.com';
var selection = document.getSelection();
document.execCommand('createLink', true, url);

- Adam

---

没有回答问题。OP想要添加target="_blank"。 - Steve Carey

Answer 6

execCommand'createLink'并不总是有效。有时它会将链接文本包裹在链接中。
例如：

<a><a href="">label</a></a> 

在文档中出现HTML链接代码但链接无效的情况下，可以使用execCommand 'insertHTML'。

 val=`<a href="`+val+`" target="_blank">`+label+`</a>`      
//document.execCommand('createLink', false, val);
 document.execCommand('insertHTML', false, val);

- Stan Smith