如何从getSelection()获取锚href jQuery的
问题描述:
我实现了富文本编辑器与创建链接功能。我可以创建链接,但是当我想更新链接时,例如,我点击一个现有的锚节点并点击“链接”按钮,它不显示原始网址。我怎样才能让它显示原始的网址?到目前为止,这是我所:如何从getSelection()获取锚href jQuery的
$.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>
答
你可以试试anchorNode.parentNode
。这将返回可以像这样使用的HTML锚节点。
var sText = iframeDocument.getSelection();
var anchorTag = sText.anchorNode.parentNode;
console.log($(anchorTag).prop('href'));
嗨谢谢,它的工作原理!另一个问题是,当我使用getSelection()时,它也抓取额外的空间,我不能得到实际的锚标记。任何想法如何解决这个问题? – coffeeak
你到底得到了什么? – Rohit416
未定义...... – coffeeak