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

我能够找到解决方案。不知道这是否是正确的方法，但它确实有效。在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>');
}

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

Answer 2

如果您之前使用粗体或斜体，那么

insertHTML可能会受挫。我使用以下方法：

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

Answer 3

由于没有简单的跨浏览器解决方案，因此一个跨浏览器的解决方法可以在编辑器中以编程方式将事件处理程序附加到a：

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

Answer 4

我知道这个帖子已经很老了，但是让我把2美分扔进去，也许有人会觉得这很有用;）我正在研究WYSIWYG编辑器当我尝试从FF中的选定图像建立链接时，我发现接受的解决方案失败了（getSelection（）。getRangeAt（0）返回图像的父div并处理图像因为它从来就不存在（这就是我所看到的）），这是一个肮脏但有效（并且，我认为，它是turbo-cross-browser）的想法，我提出了（jQuery）：

rejected

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

Answer 5

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

document.designMode = "on";

然后以下应该起作用：

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

使用execCommand'createlink'添加target =“_ blank”

5 个答案: