2016-06-28 7 views
0

リンクの作成機能を備えたリッチテキストエディタを実装しました。私はリンクを作成することができますが、リンクを更新する場合、たとえば、既存のアンカーノードをクリックして[リンク]ボタンをクリックすると、元のURLは表示されません。元のURLを表示するにはどうすればよいですか?これまでのところ、これは私が持っているものです:あなたはanchorNode.parentNodeを試すことができますgetSelection()jqueryからアンカーhrefを取得する方法

$.fn.createRichTextEditor = function(width, height = "auto") { 
 
    var iframeDocument; 
 

 
    var iframeDocumentId = this.attr("id") + "-rte-editor"; 
 

 
    var newHtml = "<div id='rte-" + iframeDocumentId + "' class='rte'>" + 
 
    "<ul class='rte-toolbar'>" + 
 
    "<li id='createLink'><button id='rte-createLinkBtn-" + iframeDocumentId + "' class='rte-button-link' value='createLink' title='Link'>Create Link</button></li>" + 
 
    "</ul>" + 
 
    '<div id="' + iframeDocumentId + '-container"></div>' + 
 
    "</div>"; 
 

 
    this.after(newHtml); 
 
    this.css('display', 'none'); 
 

 
    var iframe = $('<iframe/>', { 
 
    id: iframeDocumentId, 
 
    class: 'rte-iframe', 
 
    style: 'width;100%;height:' + height, 
 
    load: function() { 
 
     iframeDocument = this.contentDocument; 
 
     iframeDocument.designMode = 'On'; 
 
     $(this).find('body').html('<br><br/>'); 
 
     this.contentWindow.focus(); //New 
 
    } 
 
    }); 
 

 
    $('#' + iframeDocumentId + '-container').append(iframe); 
 

 

 
}; 
 

 
$('.rte-button-link').click(function() { 
 
    var sText = iframeDocument.getSelection(); 
 
    var anchorTag = sText.anchorNode.parentNode; 
 
    var url = $(anchorTag).prop('href'); 
 
    if (!url) { 
 
    url = "https://"; 
 
    } 
 
    var input = prompt("Please enter a url", url); 
 
    if (input !== null) { 
 
    iframeDocument.execCommand('insertHTML', false, '<a href="' + input + '" onclick="window.open(\'' + input + '\')" style="cursor: pointer;">' + sText + '</a>'); 
 
    } 
 
}); 
 

 
$("#editor").createRichTextEditor(500);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> 
 
<div id="editor"> 
 

 
</div>

答えて

0

。このように使用できるHTMLアンカーノードが返されます。

var sText = iframeDocument.getSelection(); 
var anchorTag = sText.anchorNode.parentNode; 
console.log($(anchorTag).prop('href')); 
+0

こんにちは、ありがとう、それは動作します!他の問題は、getSelection()を使用すると余分なスペースも取られ、実際のアンカータグを取得できないということです。どのようにこれを修正するアイデア? – coffeeak

+0

あなたは正確に何を得ますか? – Rohit416

+0

未定義... – coffeeak

関連する問題