Adding a target="_blank" with execCommand 'cre

Adding a target="_blank" with execCommand 'createlink'

本文关键字：quot execCommand with cre blank Adding target      更新时间：2023-09-26

我正在尝试为自定义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";
}

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

我找到了一个解决方案。不知道这是不是正确的做法，但它确实有效。下面是https://stackoverflow.com/a/5605841/997632，这是我用来让我的代码工作的:

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

insertHTML如果前面有粗体或斜体，则可能会感到沮丧。我使用以下方法:

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

我知道这个帖子很老了，但是让我把我的2美分扔进去，也许有人会发现这很有用;)我也在一个所见即所得的编辑器上工作。当我试图从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);

这主意好吗?效果很好。这个简单^^

由于没有直接的跨浏览器解决方案，一个跨浏览器的解决方案可以通过编程方式将事件处理程序附加到编辑器中的a:

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

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

document.designMode = "on";

那么下面的代码应该可以工作:

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

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);
相关文章：