Aggiunta di una destinazione = "_ blank" con execCommand 'createlink'

Question

Sto tentando di creare un mini editor WYSIWYG per un CMS personalizzato. Ha la possibilità di aggiungere e rimuovere collegamenti. Aggiunge collegamenti fini, ma vorrebbe avere la possibilità di aggiungere target="_blank" al collegamento ipertestuale. Inoltre, se possibile, mi piacerebbe poter aggiungere alt="" e title="".

Al momento questo è il mio codice:

function addLink() { 
    var linkURL = prompt('Enter a URL:', 'http://'); 
    editorWindow.document.execCommand('createlink', false, linkURL); 
} 

cercato in giro, e non riesco a trovare una soluzione. La maggior parte delle soluzioni che ho visto dicono di aggiungere:

function addLink() { 
    var linkURL = prompt('Enter a URL:', 'http://'); 
    var newLink = editorWindow.document.execCommand('createlink', false, linkURL); 
    newLink.target = "_blank"; 
} 

Ma questo non sembra funzionare. Eventuali suggerimenti?

Answer 1

Sono stato in grado di trovare una soluzione. Non so se questa è la strada giusta da percorrere, ma funziona. A seguito di https://stackoverflow.com/a/5605841/997632, questo è quello che ho usato per il mio codice funzioni:

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

Solo nel caso qualcun altro sta cercando e si imbatte in questo ...

Answer 2

insertHTML può essere vanificato se si dispone di un grassetto o corsivo prima. Io uso il seguente approccio:

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

Answer 3

Dal momento che, non esiste una soluzione semplice cross-browser, una soluzione cross-browser potrebbe essere programatically allegando un gestore di eventi per a all'interno del vostro editor di:

Answer 4

So che questo thread è piuttosto vecchio, ma mi permetta di lanciare i miei 2 centesimi, e forse qualcuno troverà questo utile;) Sto lavorando anche su un editor WYSIWYG Come ho trovato la soluzione accettata non funziona per me quando provo a creare un collegamento da un'immagine selezionata in FF (il getSelection(). GetRangeAt (0) restituisce il div padre dell'immagine e tratta il immagine come mai non c'era (è così che la vedo)), ecco un'idea (ma penso che sia turbo-cross-browser) che mi è venuta in mente (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); 

È una buona idea? Funziona come un fascino. E questa semplicità ^^