web-dev-qa-db-ja.com

execCommand'createlink 'を使用してtarget = "_blank"を追加する

カスタム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";
}

しかし、これはうまくいかないようです。助言がありますか？

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

他の誰かがこれを探してつまずいた場合に備えて...

20
thelos999

以前に太字または斜体を使用していた場合、insertHTMLはイライラする可能性があります。私は次のアプローチを使用します。

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

簡単なクロスブラウザーソリューションがないため、クロスブラウザーの回避策の1つとして、エディター内のaにイベントハンドラーをプログラムでアタッチすることができます。

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

このスレッドはかなり古いことは知っていますが、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);

それは良い考えですか？チャームのように機能します。そして、このシンプルさ^^

2
Piotrek

仕様に従って、documentはデザインモードでなければならないことに誰も言及していないようです。

document.designMode = "on";

次に、以下が機能するはずです。

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