Динамически аннотировать HTML?

Question

Я хотел бы сделать следующее на странице ASP.NET для Internet Explorer и Firefox:

1. Отображение загруженного HTML-документа в окне.
2. Разрешить пользователю выделять произвольный раздел стандартным текстовым курсором и нажимать кнопку «Оставить комментарий здесь».
3. Сохраните точные начальные и конечные точки выделения, а не только содержимое выделения, и свяжите их с уникальным идентификатором.
4. Выделите все между начальной и конечной точками, наложив тег .

1 и 2 не проблема. Но для 3 и 4 ... это возможно? Если так, как я могу пойти по этому поводу?

Если это невозможно сделать для документа HTML, как на счет простого текста? (Для HTML мы можем предположить, что это относительно просто. Например, я предполагаю, что это поддерживает документы Word, сохраненные как HTML.)

Answer 1

Ну, у вас есть проблемы.

Предположим, этот текст:

Hello my
name is
Josh and
this is an
example for you

Что внизу было так:

<span>
  Hello my
  <span>
    name is<br/>
    Josh and
  </span>
  <span>
    this is an<br/>
    example for you
  </span>
</span>

Тогда предположим, что я выбрал:

Josh and
this is an

HTML-код, который я выбрал:

  Josh and
</span>
<span>
  this is an

Так что, если вы обернетесь вокруг этого, у вас получится испорченный HTML.

Итак, я бы порекомендовал следующее:

• Получить выделенный текст с помощью JavaScript
• Убрать теги HTML из выделенного текста

В итоге вы получите:

function getSelectedTextNoHtml() {
    return getSelectedText().replace(/(<([^>]+)>)/ig, "");
}

function getSelectedText() {
    if (window.getSelection)
        return window.getSelection();
    else if (document.getSelection)
        return document.getSelection();
    else if (document.selection)
        return document.selection.createRange().text;
    return "";
}

Затем можно взять HTML-код всего документа, вырезать теги HTML и найти индекс выделенного текста в текстовой версии документа.

Я даже могу подумать (некрасиво, но выполнимо), как получить индекс выделения в HTML. Но я предупреждаю вас, если вы хотите их, они безобразны.

Есть даже очень уродливых способа аккуратно обвести выделенный текст по выбранному вами уникальному ID. Конечно, всегда есть способы делать вещи. Все просто алгоритм далеко. Но это потребовало бы хороших дней работы, оттачивая это!

Я написал достаточно, если вы хотите, чтобы я уточнил, просто спросите!

UPDATE:

ОК, вы просили об этом:)

• Возьми выделенный текст и запиши его куда-нибудь
• Заменить выделенный текст временно чем-то совершенно уникальным
• Найдите индекс этого совершенно уникального текста
• Изменить текст обратно

Если вы хотите сделать это осторожно, без того, чтобы текст не мигал и не менялся, вы можете попробовать воспользоваться пробелом нулевой ширины HTML:

​

Вставьте это перед ним 100 раз и найдите индекс 100 пробелов нулевой ширины!

Конечно, он потерпит неудачу, если в его документе будет 100 пробелов нулевой ширины и их выделенный текст в другом месте, но в этот момент я говорю: «Пусть не получится»:)

Howzat

Answer 2

Для добавления в список @ cweiske также есть Annotator:

• http://okfnlabs.org/annotator/

Answer 3

Доступно несколько инструментов HTML-аннотации:

• http://code.google.com/p/adnotatio/
• http://code.softwarefreedom.org/projects/stet
• http://code.google.com/p/adnotatio/wiki/References