Javascript - проверьте, что выделенный текст в Contenteditable имеет теги ссылок

В настоящее время я создаю очень простой встроенный редактор для редактируемых областей контента на веб-сайте. Мне удалось сделать основы (жирный шрифт, курсив и т. д.), и теперь я попал в ловушку.

Я разрешаю пользователю создавать ссылки, выделяя текст и создавая ссылку с помощью ввода текста. Моя проблема в том, что если выделенный/выделенный текст уже заключен в теги, я хочу, чтобы при вводе текста отображалась текущая ссылка. Таким образом, у пользователя есть возможность закрыть ссылку или обновить/отредактировать ее.

Мой код для создания ссылки путем выделения выделенного текста 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 сохраняют текущий выделенный текст и позволяют мне создать ссылку в doneUrl() через execCommand.

Все это работает нормально, все, что мне нужно, это проверить и получить, если оно присутствует. Любое руководство будет оценено.


javascript html execcommand
person HireLee    schedule 29.08.2013    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Попробуйте: Grande.js

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

Выглядеть так, когда вы выделяли тексты

введите здесь описание изображения

В прямом эфире: http://mattduvall.com/grande.js/

person l2aelba    schedule 29.08.2013
comment
Я посмотрел на это, это было не совсем то, что я искал. Я не мог понять из их кода, как он проверяет наличие текущих тегов ‹a› вокруг выделенного текста. Любые идеи из его файла .js? Должно быть что-то с 'hasParentWithTag' - person HireLee; 29.08.2013

arrow_upward
0
arrow_downward

Вот функция, чтобы проверить, является ли текущий выбор ссылкой.

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

Это сработало очень хорошо для меня. Удачи.

person Tim Whitacre    schedule 25.09.2013