Блог

В настоящее время я работаю над более крупным проектом в Django, но мне довольно сложно, когда дело доходит до JavaScript-стороны вещей, поскольку я только начал с этого…

Чтобы разбить / упростить проблему:

Внутри специального div (например "main-content" ) будет включен некоторый форматированный HTML, где пользователь выбирает некоторый текст и нажимает кнопку. После нажатия кнопки начальная и конечная позиции выделения (относительно div , игнорируя HTML-теги внутри div , так что начальная / конечная позиция не должна изменяться при вставке HTML-тегов) будут отправлены на сервер вместе с некоторой дополнительной информацией, сохраненной в базе данных, а затем будут отправленыотправьте через websocket в разные места, где информация будет использоваться для добавления a <span ...>...</span> вокруг начальной / конечной позиции (на основе того же HTML).

Первая проблема: до сих пор мне удавалось вычислить относительную начальную / конечную позицию выделения, но я понятия не имею, как воссоздать выделение после отправки через websocket — возможно ли это вообще? Я искал решения на JavaScript или jQuery, но не нашел ничего полезного для моего случая.

Вторая проблема: я хочу, чтобы пользователь мог делать выбор только в этом специальном div («main-content») или, скорее, проверять, находится ли начальная или конечная позиция выделения за пределами div. Кто-нибудь знает простой способ сделать это?

Пример

HTML (выдержка):

 ...
<div id="controls">
    <h2>Controls</h2>
    some text...
    <input type="button" onclick="alertSelection()" unselectable="on" value="make selection">
</div>
<div id="main-content">
    <h1>Lorem <b>ipsum</b> dolor sit amet consectetuer adipiscing elit</h1>
    <p>
        Lorem ipsum <i>dolor</i> sit amet, consectetuer adipiscing elit.
        Aenean commodo ligula eget dolor. Aenean massa <strong>strong</strong>.
        Lorem ipsum dolor sit amet...
        ...
    </p>
</div>
...
 

JavaScript (выдержка):

 function getSelectionCharOffsetsWithin(element) {
    var start = 0, end = 0;
    var sel, range, priorRange;
    if (typeof window.getSelection != "undefined") {
        range = window.getSelection().getRangeAt(0);
        priorRange = range.cloneRange();
        priorRange.selectNodeContents(element);
        priorRange.setEnd(range.startContainer, range.startOffset);
        start = priorRange.toString().length - 1;
        end = start   range.toString().length;
    }
    return {
        start: start,
        end: end
    };
}

function alertSelection() {
    var mainDiv = document.getElementById("main-content");
    var sel = getSelectionCharOffsetsWithin(mainDiv);
    
    ... sendig to backend stuff ...
}
 

Теперь, если пользователь делает выбор, например, «Lorem ipsum do» непосредственно в начале div (фактически содержащего <h1>Lorem <b>ipsum</b> do ) и нажимает кнопку alertSelection() , отправляет начальную позицию 0 и конечную позицию 14 (вместе с некоторой другой информацией) на сервер.

Это уже работает, кроме проверки того, находятся ли границы выделения за пределами "main-content" (идеи?).

Что еще должно произойти:

Сервер отправляет следующую информацию через websocket (уже работает):

• начальная позиция: 0
• конечная позиция: 14
• стиль: …
• дополнительная информация: …

и с этими данными <span style="..."> вокруг позиции должен быть добавлен тег 0:14 , чтобы конечный результат выглядел так:

 <div id="main-content">
    <h1><span style="...">Lorem <b>ipsum</b> do</span>lor sit amet consectetuer adipiscing elit</h1>
    <p>
        ...
    </p>
</div>
 

Я даже на правильном пути с этим подходом, или это невозможно, или у кого-нибудь есть более простое решение?