Question

我想创建一个类似wordpress的CMS。在我的文本编辑器中，我希望用户能够通过单击按钮创建超链接。但是我不想显示警报，因此用户可以输入url，但可以通过文本输入在文本区域内部或上方的所选单词/句子下显示div。如何获取所选单词的位置？

我已经试图像这样向其添加一个textnode：

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

但是我得到一个错误，.appendChild（）不是一个函数。

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

我希望将textnode附加到所选单词上，但是它不起作用

Answer 1

尝试一下：

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

.appendchild()是一个javascript函数，jquery无法使用它。请改用.append()，并在其中使用.createTextNode()。

Answer 2

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

此代码是从How can I get the DOM element which contains the current selection?复制并更改的，以演示此特定问题的用法。

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

如何在选择文本的位置显示对象？

2 个答案: