用execCommand'createlink'添加目標=「_ blank」

我正在嘗試爲自定義CMS創建一個迷你WYSIWYG編輯器。它可以選擇添加和刪除鏈接。它增加了鏈接很好，但想要選擇將target="_blank"添加到超鏈接。另外，如果可能，我希望能夠添加alt=""和title=""。用execCommand'createlink'添加目標=「_ blank」

目前，這是我的代碼：

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"; 
}

但是這似乎不起作用。有什麼建議麼？

來源

2014-05-22 thelos999

你真的想使用execCommand功能嗎？爲什麼不簡單地創建一個新的鏈接元素並將其添加到dom中，或者甚至更好地使用jQuery？ =>另外，不要忘記轉義用戶可以輸入的URL以防止可能的XSS –

感謝您的回覆。不完全知道如何去做這件事。我知道你用'document.createElement（'a'）;'添加了一個新元素，然後添加'setAttribute（'target'，'_blank'）;'。我唯一看不到的是如何將鏈接應用於突出顯示的文本。 – thelos999

我能找到解決方案。不知道這是否是正確的路，但它的工作原理。繼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>'); 
}

...

來源

2014-05-27 13:47:47 thelos999

「在IE 11中，document.selection消失，insertHTML仍然不受支持」 http://stackoverflow.com/questions/3398378/execcommand-inserthtml-in-internet-explorer – Jim

你可以像這樣使用jQuery $（「A」）ATTR（「目標」，「_空白」）。在正常的execCommand之後。它只是將屬性添加到每個錨點 - 或者您可以嘗試針對特定的錨點......這很醜陋，但它很有用。 – Edd

insertHTML可以，如果你有一個粗體或斜體受挫之前。我用下面的辦法：

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

來源

2016-05-04 16:38:43 Raphael

，因爲沒有直接的跨瀏覽器的解決方案，一個跨瀏覽器的解決方法可能是編程的事件處理程序連接到a您的編輯器中：

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

來源

2016-08-12 11:58:29

我知道這個線程是相當老，但讓我把我的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);

這是個好主意嗎？奇蹟般有效。而這種簡單性^^

來源

2017-08-01 21:43:35 Piotrek

用execCommand'createlink'添加目標=「_ blank」

回答

相關問題