Vue: как узнать, какой текст выделен / выделен пользователем и отображать несколько экземпляров

Question

Я пытаюсь заставить компонент Highlight, который может:

1. знать, что пользователь выбрал / выделил (mousedown и перетаскивает текст)
2. показать выделенный текст(закрасьте вышеупомянутый выделенный текст в цвет)
3. может обрабатывать несколько экземпляров этого.

см. изображения, чтобы понять, к чему я стремлюсь:

Из Google, StackExchange, средних сообщений и т. Д. У меня есть компонент, который может выяснить текст пользователявыделено:

codesandbox

Это в основном взято из этого среднего сообщения freecodecamp , который использует подход slot.

Для фактического рендеринга выделенного текста большинство примеров, которые я нашел, делают это с помощью регулярных выражений и заменяют исходный текст диапазоном или чем-то другим (например, vue-text-highlight ).

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

Поэтому мне было интересно, есть ли у кого-нибудь идеипреодолеть это.

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

Answer 1

Было довольно весело - и это не большая попытка, но быстрая попытка помочь вам.

https://codesandbox.io/s/zw2179y2yl

Поддерживается следующее:

• Независимое выделение нескольких битов текста (относительно) случайными цветами.
• Поддержка выбора текста на правой панели (затем щелкните соответствующий уже выделенный текст в левом поле), и он унаследуеттого же цвета.

Довольно легко расширить, чтобы установить некоторые идентификаторы для массивов, а затем хранить ссылки между правым и левым полями.

Как использовать:

• Действие: выделите текст на левой панели
• Результат: Вы увидите выделенный текст под панелями
• Действие: выделите текст на правой панели
• Результат: на правой панели будет отображаться серый фон
• Действие: Нажмите на одну из выделенных строк текста под панелями
• Результат: текст, который ранее был выделен справабудут наследовать цвет выделенного текста, который вы щелкнули.

Редактировать:

Только что заметил пару ошибок:

• Если вы выделите пробел, этополностью облажался.
• Подсветка жадная, поэтому, если вы выделите «это», она выделит все экземпляры «это», независимо от того, написаны они на словах или нет одинаковым цветом по всему тексту.