How can I show an object at the location where I select text?

Question

I want to create a CMS like wordpress. In my text editor I want the user to be able to create a hyperlink via a button click. But I don't want to show an alert so the user can input the url but a div shown under the selected word/sentence inside or over the text area with an text input. How do I get the location of the selected word?

I already tried to append a textnode to it like this:

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

but I get an error, that .appendChild() is not a function.

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

I expect the textnode is appended to the selected word, but it doesnt work

Ramon de Vries · Answer 1 · 2019-01-03T12:40:47.310

0

try this:

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

.appendchild() is a javascript function, jquery can't use it. use .append() instead and use .createTextNode() inside it.

edited Jan 03 '19 at 12:40

answered Jan 03 '19 at 12:38

Ramon de Vries

1,312
7
20

You missunderstood, sorry. I don't want to append the child to the button I click, I want to append the child to the selected word or sentence in a textarea, when I click the button. – Mr.Didu Jan 03 '19 at 12:40
@Mr.Didu ive updated my anwser again, is this working for u? – Ramon de Vries Jan 03 '19 at 12:42
that doesn't work either :/ `Uncaught TypeError: window.getSelection.append is not a function` – Mr.Didu Jan 03 '19 at 12:58

Ferry Kobus · Accepted Answer · 2019-01-03T13:12:22.500

The getSelection() method will not return a node to append text to.

I've used some code from a different answer (added below the code) to achieve what you're asking.

$('#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;
        }   
    }
}

This code is copied and altered from How can I get the DOM element which contains the current selection? to demonstrate the use for this specific question.

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

Thank you, but that doesn't do what I wanted to do. Maybe I explained a little bit confusing. I don't want to add text to the text area, I want to show an text input when the user clicks on the button, so they can input any url and the selected word/sentence will become a hyperlink with the url the user wrote in the text box. I'm sorry, I updated my question. — Mr.Didu, Jan 03 '19 at 12:56
@Mr.Didu Updated the answer to match your question. This will insert an input at the selected area. Real demo: https://jsfiddle.net/zuvq9nyc/5/ — Ferry Kobus, Jan 03 '19 at 13:06
thank you, that's kinda what I want. But isn't it possible to just show a div at the location that's overlaying the text area? so the text behind doesn't get pushed away — Mr.Didu, Jan 03 '19 at 14:27
Sure, but that's just fiddling around with some css. Position the div or input absolute to the selected text. You've got all the info to do that. — Ferry Kobus, Jan 04 '19 at 11:07

How can I show an object at the location where I select text?

2 Answers2