使用execCommand'createlink'添加target ="_ blank"

Question

我正在尝试为自定义CMS创建一个迷你WYSIWYG编辑器.它可以选择添加和删除链接.它添加链接很好,但希望有添加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";
}

但这似乎不起作用.有什么建议？

Answer 1

我找到了解决方案.不知道这是否是正确的方法,但它确实有效.在/sf/answers/392408901/之后,这是我用于我的代码的工作:

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

以防万一其他人正在寻找并偶然发现...

Answer 2

如果您之前使用粗体或斜体字，insertHTML可能会感到沮丧。我使用以下方法：

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

Answer 3

我知道这个帖子已经很老了，但是让我投入 2 美分，也许有人会发现这很有用；）我也在开发一个 WYSIWYG 编辑器，当我尝试制作一个时，我发现接受的解决方案对我来说失败了来自 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);

这是个好主意吗？奇迹般有效。还有这种简单^^