javascript 使用 execCommand 'createlink' 添加一个 target="_blank"
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23811132/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding a target="_blank" with execCommand 'createlink'
提问by thelos999
I am attempting to create a mini WYSIWYG editor for a custom CMS. It has the option to add and remove links. It adds links fine, but would like to have the option to add target="_blank"to the hyperlink. Also, if possible, I would like to be able to add alt=""and title="".
我正在尝试为自定义 CMS 创建一个迷你 WYSIWYG 编辑器。它可以选择添加和删除链接。它可以很好地添加链接，但希望可以选择添加target="_blank"到超链接。另外，如果可能的话，我希望能够添加alt=""和title=""。
At the moment this is my code:
目前这是我的代码：
function addLink() {
var linkURL = prompt('Enter a URL:', 'http://');
editorWindow.document.execCommand('createlink', false, linkURL);
}
Been looking around, and can't seem to find a solution. Most of the solutions I've seen say to add:
环顾四周，似乎无法找到解决方案。我见过的大多数解决方案都说要添加：
function addLink() {
var linkURL = prompt('Enter a URL:', 'http://');
var newLink = editorWindow.document.execCommand('createlink', false, linkURL);
newLink.target = "_blank";
}
But this doesn't seem to work. Any suggestions?
但这似乎不起作用。有什么建议？
回答by thelos999
I was able to find a solution. Don't know if this is the right way to go, but it works. Following https://stackoverflow.com/a/5605841/997632, this is what I used for my code to work:
我能够找到解决方案。不知道这是否是正确的方法，但它有效。在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>');
}
Just in case anyone else is looking and stumbles upon this...
以防万一其他人正在寻找并偶然发现这个......
回答by Raphael
insertHTML can be frustrated if you have a bold or italic before. I use the following approach:
如果您之前有粗体或斜体，insertHTML 可能会令人沮丧。我使用以下方法：
var url = 'example.com';
var selection = document.getSelection();
document.execCommand('createLink', true, url);
selection.anchorNode.parentElement.target = '_blank';回答by Tarun Dugar
Since, there is no straightforward cross-browser solution, one cross-browser workaround could be programatically attaching an event handler to ainside your editor:
由于没有直接的跨浏览器解决方案，因此一种跨浏览器解决方法可以通过编程方式将事件处理程序附加到a编辑器内部：
var aLinks = Array.prototype.slice.call(editorElement.querySelectorAll('a'));
aLinks.forEach(function(link) {
link.addEventListener('click', function() {
window.open(link.href, '_blank');
});
});
回答by Piotrek
I know this thread is quite old, but let me throw my 2 cents in, and maybe someone will find this useful ;) I'm working on a WYSIWYG editor too As I found the accepted solution fails for me when I try to make a link from a selected image in FF (the getSelection().getRangeAt(0) returns the image's parent div and treats the image as it never wasn't there (this is how I see it)), here's a dirty but working (and, I think, it's turbo-cross-browser) idea I came up with (jQuery):
我知道这个线程很旧，但让我投入 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);
Is it good idea? Works like a charm. And this simplicity ^^
这是个好主意吗？奇迹般有效。而这种简单^^
回答by Adam
Nobody seems to mention that as per specs, the documenthas to be in the design mode:
似乎没有人提到根据规范，document必须处于设计模式：
document.designMode = "on";
Then the following should work:
那么以下应该工作：
var url = 'http://google.com';
var selection = document.getSelection();
document.execCommand('createLink', true, url);
