Как я могу показать объект в месте, где я выбираю текст?

Question

Я хочу создать CMS, как WordPress.В моем текстовом редакторе я хочу, чтобы пользователь мог создавать гиперссылки нажатием кнопки.Но я не хочу показывать предупреждение, чтобы пользователь мог ввести URL-адрес, но div, показанный под выбранным словом / предложением внутри или над текстовой областью с текстовым вводом.Как получить местоположение выбранного слова?

Я уже пытался добавить к нему текстовый узел так:

window.getSelection().appendChild(document.createTextNode("testing"));

, но я получаю сообщение об ошибке, что .appendChild ()не функция.

$('#btnLink').click(function() {
   window.getSelection().appendChild(document.createTextNode("testing"));
})

Я предполагаю, что текстовый узел добавляется к выбранному слову, но он не работает

Answer 1

Метод getSelection() не возвращает узел для добавления текста.

Я использовал некоторый код из другого ответа (добавлен ниже кода) для достижения того, что вы просите.

$('#btnLink').click(function() {
    var elm = getRange();
    var div = document.createElement("div");
    div.appendChild( document.createElement("input") );
    elm.collapse(false);
    elm.insertNode(div);
});

function getRange() {
    var range, sel, container;
    if (document.selection) {
        range = document.selection.createRange();
        range.collapse(isStart);
        return range.parentElement();
    } else {
        sel = window.getSelection();
        if (sel.getRangeAt) {
            if (sel.rangeCount > 0) {
                range = sel.getRangeAt(0);
            }
        } else {
            // Old WebKit
            range = document.createRange();
            range.setStart(sel.anchorNode, sel.anchorOffset);
            range.setEnd(sel.focusNode, sel.focusOffset);

            // Handle the case when the selection was selected backwards (from the end to the start in the document)
            if (range.collapsed !== sel.isCollapsed) {
                range.setStart(sel.focusNode, sel.focusOffset);
                range.setEnd(sel.anchorNode, sel.anchorOffset);
            }
       }

        if (range) {
           return range;
        }   
    }
}

Этот код скопирован и изменен с Как получить элемент DOM, который содержит текущий выбор? , чтобы продемонстрировать использование для этого конкретного вопроса.

A JSFiddle: https://jsfiddle.net/zuvq9nyc/5/

Answer 2

попробуйте это:

$('#btnLink').click(function() {
   window.getSelection.append(document.createTextNode('testing'));
})

.appendchild() - это функция javascript, jquery не может ее использовать. используйте .append() вместо этого и используйте .createTextNode() внутри него.