#javascript #html #jquery #dom #selection
#javascript #HTML #jquery #dom #выделение
Вопрос:
В настоящее время я работаю над более крупным проектом в 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>
Я даже на правильном пути с этим подходом, или это невозможно, или у кого-нибудь есть более простое решение?
Комментарии:
1. Это большая путаница, пытаясь понять, о чем вы просите, вы хотите определить, куда вы вставили диапазон в DOM? вы могли бы сделать пару вещей, чтобы узнать, где он находится, например, пометить его
2. @Andrew Извините, если это сбивает с толку, английский не мой основной язык… В принципе, у меня есть числовой начальный и конечный индекс / позиция (например, при доступе к строке в Python) и я хочу вставить интервал вокруг текста между этими индексами. После вставки индексы не должны меняться, поэтому можно было бы вставлять сразу несколько интервалов и всегда получать один и тот же результат — в основном это похоже на то, что несколько человек имеют один и тот же текст, и им говорят подчеркивать с 1-го по 15-й символ, с 45-го по 80-й символ и т.д.