Javascript-检查Contenteditable中突出显示的文本是否有链接标记
我目前正在为网站内的内容可编辑区域构建一个非常简单的内联编辑器。我已经设法做到了基础(粗体、斜体等),现在我遇到了一个陷阱 我允许用户通过突出显示文本并通过文本输入创建链接来创建链接。我的问题是,如果突出显示/选定的文本已包装在标记中,我希望文本输入显示当前链接。从而使用户能够终止链接或更新/编辑链接 通过突出显示选定文本HTML创建链接的我的代码:Javascript-检查Contenteditable中突出显示的文本是否有链接标记,javascript,html,execcommand,Javascript,Html,Execcommand,我目前正在为网站内的内容可编辑区域构建一个非常简单的内联编辑器。我已经设法做到了基础(粗体、斜体等),现在我遇到了一个陷阱 我允许用户通过突出显示文本并通过文本输入创建链接来创建链接。我的问题是,如果突出显示/选定的文本已包装在标记中,我希望文本输入显示当前链接。从而使用户能够终止链接或更新/编辑链接 通过突出显示选定文本HTML创建链接的我的代码: <div contenteditable='TRUE' class="editable">This Contenteditable t
<div contenteditable='TRUE' class="editable">This Contenteditable text</div>
<!-- Add Url to Highlighted Text -->
<div class="text-button" unselectable="on" onmousedown="event.preventDefault();" onclick="displayUrlInserter();">Add Url</div>
<!-- Show URL Input and Submit -->
<div class="text-button-panel" id="text-button-panel">
<input type="text" id="url" placeholder="Paste or Type your link">
<div class="text-panel-done" onmousedown="event.preventDefault();" onclick="doneUrl()">Done</div>
<div class="text-panel-cancel" onmousedown="event.preventDefault();" onclick="cancelUrl()">Cancel</div>
</div>
saveSelection和restoreSelection保存当前选定的文本,并允许我通过execCommand在doneUrl()中创建链接
这一切都很好,我所需要的是能够检查,并得到它是否存在。任何指导都将不胜感激 试试:Grande.js 当您选择文本时,如下所示
直播:这里有一个功能,用于检查当前选择是否为链接
function itemIsLinked(){
if(window.getSelection().toString() != ""){
var selection = window.getSelection().getRangeAt(0);
if(selection){
if (selection.startContainer.parentNode.tagName === 'A' || selection.endContainer.parentNode.tagName === 'A') {
return [true, selection];
} else { return false; }
} else { return false; }
}
}
然后你可以像这样跑
var isLink = itemIsLinked();
如果链接,它将返回:
isLink[0] -> true
isLink[1] -> the link object.
然后,要从该选择中获取HREF,请使用:
isLink[1].startContainer.parentNode.href
这对我来说真的很有效。祝你好运。我看了一下,这不是我真正想要的。我无法从他们的代码中找出他如何检查选定文本周围的当前标记。从他的.js文件中有什么想法吗?必须是带有“hasParentWithTag”的内容
isLink[1].startContainer.parentNode.href