Выберите диапазон в contenteditable div - PullRequest
20 голосов
/ 22 сентября 2010

У меня есть contenteditable div и несколько параграфов.

Вот мой код:

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
        <div id="main" contenteditable="true" 
             style="border:solid 1px black; width:300px; height:300px">
            <div>Hello world!</div>
            <div>
                <br>
            </div>
            <div>This is a paragraph</div>
        </div>
    </body>
</html>

Предположим, я хочу сделать выбор диапазона, который будетстрока "мир! Это"

Как это сделать?

1 Ответ

40 голосов
/ 23 сентября 2010

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

var mainDiv = document.getElementById("main");
var startNode = mainDiv.firstChild.firstChild;
var endNode = mainDiv.childNodes[2].firstChild;

var range = document.createRange();
range.setStart(startNode, 6); // 6 is the offset of "world" within "Hello world"
range.setEnd(endNode, 7); // 7 is the length of "this is"
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...