1

I have a div element with text and, possibly, other children tags inside it (imgs, spans, etc). I need the following - when user clicks somewhere within a div on a text, the child tag has to be inserted exactly in that position inside the text. Absolute positioning is not an option - I need to modify innerHTML of the div.

For instance, if the div is

<div>some text, more text</div>

And user clicks right after "more", my div should be modified as follows

<div>some text, more<span>new tag</span> text</div>
4

2 回答 2

1

您可以将每个单词/字符包装在一个跨度中，然后在该标签之后附加新标签。LetteringJS ( http://letteringjs.com/ ) 可以帮助您。

如果您要使用输入，则可以使用 jCaret ( http://www.examplet.org/jquery/caret.php )，从示例来看，它看起来很漂亮。

于 2013-08-09T20:54:33.083 回答
0

正如@LePhil 建议的那样，我将每个单词都包装在一个跨度中。在以下示例中，文本插入到鼠标单击的单词之后：

http://jsfiddle.net/LXZKA/2/

function parseHTML(str) {

    var result = '';

    function processText(text, i) {
        if (text && text !== ' ') {
            result += '<span data-begin-index=' + (i - text.length) + ' data-end-index=' + (i - 1) + '>' + text + '</span>';
        }
    }

    function processTag(tag) {
        result += tag;
    }

    var withinTag = false, withinText = false, text = '', tag = '';
    for (var i = 0; i < str.length; i++) {
        var ch = str.charAt(i);
        if (ch === '<') {
            withinText = false;
            withinTag = true;
            processText(text, i);
            text = '';
            tag = '<';
        } else if (ch === '>') {
            withinTag = false;
            withinText = false; 
            processTag(tag + '>');
            tag = '';
            text = '';
        } else if (ch === ' ' || ch == '\xA0') {
            if (withinTag) {
                tag += ch;
            } else {
                if (!text.replace(/\s+/g,'')) {
                    text += ch;
                } else {
                    processText(text + ch, i + 1);
                    text = '';
                }
            }
        } else {
            if (withinTag) {
                tag += ch;
            } else {
                text += ch;
            }
        }
    }
    processText(text, str.length);
    return result;
}

function findNode(node, x, y) {
    if (node.attributes['data-begin-index']) {
        if (x >= node.offsetLeft && x <= node.offsetLeft + node.offsetWidth && 
            y >= node.offsetTop && y <= node.offsetTop + node.offsetHeight)
        {
            return node;
        }
    } else {
        for (var i = 0; i < node.childNodes.length; i++) {
            var result = findNode(node.childNodes[i], x, y);
            if (result) {
                return result;
            }
        }
    }
}

function clicked(e, node) {
    console.log('clicked mouse');
    var x = e.x - 100;
    var y = e.y - 100;
    console.log(x + ', ' + y);
    var node = findNode(node, x, y);
    if (node) {
        var beginIndex = parseInt(node.getAttribute('data-begin-index'));
        var endIndex = parseInt(node.getAttribute('data-end-index'));
        newHTML = html.substring(0, endIndex + 1) + 'XXXXX ' + html.substring(endIndex + 1);
    } else {
        newHTML = html + 'XXXXX ';
    }
    document.getElementById('mydiv').innerHTML = parseHTML(html = newHTML);

}

document.getElementById('mydiv').innerHTML = parseHTML(html);
于 2013-08-14T22:09:33.330 回答