0

我目前正在构建一个非常简单的内联编辑器，用于网站内的内容可编辑区域。我已经设法做到了基础（粗体、斜体等），现在我遇到了一个陷阱。

我允许用户通过突出显示文本并通过文本输入创建链接来创建链接。我的问题是，如果突出显示/选定的文本已经包含在标签中，我希望文本输入显示当前链接。从而使用户能够终止链接或更新/编辑它。

我通过突出显示选定的文本 HTML 来创建链接的代码：

<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>

Javascript：

 function saveSelection() {
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            return sel.getRangeAt(0);
        }
    } else if (document.selection && document.selection.createRange) {
        return document.selection.createRange();
    }
    return null;
}

function restoreSelection(range) {
    if (range) {
        if (window.getSelection) {
            sel = window.getSelection();
            sel.removeAllRanges();
            sel.addRange(range);
        } else if (document.selection && range.select) {
            range.select();
        }
    }
}

var selRange;

function displayUrlInserter() {
    selRange = saveSelection();
    // Display
    document.getElementById("text-button-panel").style.display = "block";
    // Focus
    document.getElementById("url").focus();

}   



function doneUrl() {

    var url = document.getElementById("url").value;

    // No Url
    if (url === "") {
        return false;
    }

    // Check for HTTP
    if (!url.match("^(http|https)://")) {
        url = "http://" + url;
    }

    restoreSelection(selRange);

    **// THIS IS WHERE I NEED TO CHECK FOR EXISTING A TAGS**

    document.execCommand("CreateLink", false, url);
    // Hide Panel
    document.getElementById("text-button-panel").style.display = "none";
    // Reset Input
    document.getElementById("url").value = "";    
}

function cancelUrl() {
    document.getElementById("text-button-panel").style.display = "none";
}

saveSelection 和 restoreSelection 保存当前选定的文本，并允许我通过 execCommand 在 doneUrl() 中创建链接。

这一切都很好，我只需要能够检查并获取它是否存在。任何指导将不胜感激。

4

2 回答 2

0

这是一个检查当前选择是否为链接的功能。

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

这对我来说非常有效。祝你好运。

于 2013-09-25T15:14:25.953 回答
0

试试：Grande.js

https://github.com/mduvall/grande.js

选择文本时看起来像这样

在此处输入图像描述

直播： http: //mattduvall.com/grande.js/

于 2013-08-29T10:41:12.333 回答