Манипуляции с выбранным пользователем текстом в режиме редактирования - PullRequest
Новая
       41

Манипуляции с выбранным пользователем текстом в режиме редактирования

1 голос
/ 26 октября 2011

У меня есть этот HTML-код (он находится в блоке contenteditable="true"): 

<ol>
    <li>Mozilla Firefox 1.5+</li>
    <li>Internet <span>Explorer</span> 6+</li>
    <li>Opera 9.6+</li>
    <li>Google Chrome 2+</li>
    <li>Apple Safari 3+</li>
</ol>

Пользователь выбрал текст в этом списке:

  • точно слово «Chrome»,
  • или точно слово «Проводник» (оно обернуто тегом span).

Основное различие между словами «Chrome» и «Explorer» заключается в том, что слово «Explorer» заключено в тег span, а «Chrome» - нет.

Итак, как я узнаю, обтянут ли выделенный текст некоторыми HTML-тегами или нет?

  1. С некоторым регулярным выражением? - Я не знаю, как получить выделенный текст с тегами HTML (я знаю только, как получить простой текст из выделения).
  2. С диапазоном обнаружения commonAncestorContainer.parentNode? - Если я выбрал слово «Chrome», мой parentNode будет тегом li (но тег li не переносит выбранное слово напрямую, я не хочу устанавливать стили для тега li). Поэтому я не могу использовать commonAncestorContainer.parentNode, потому что это бесполезно для меня.

На самом деле, я просто хочу установить несколько стилей CSS для выделенного текста:

  1. если выбранный пользователем текст уже непосредственно обернут каким-либо тегом HTML, я хочу добавить правила CSS для этого тега (например, если пользователь выбрал слово «Explorer», я хочу добавить style="font-weight:bold;" для тега span; если пользователь выбрал Apple Safari 3+ Я хочу добавить правила CSS для тега li)
  2. если выбранный пользователем текст является простым текстом (напрямую не обернутым некоторыми тегами, например словом «Chrome»), я хочу обернуть этот текст некоторыми тегами и добавить некоторые правила CSS. (С этим предметом у меня проблем нет, я знаю как это сделать.)

UPD: Посмотрите, когда я выбираю какой-то текст и затем запускаю document.execCommand('Bold', false, null), браузер оборачивает мой выбор тегами b. Когда я снова выбираю тот же текст и запускаю ту же команду document.execCommand('Bold', false, null), смелость исчезает. Итак, браузер почему-то знает, что мой выбор обернут тегами b и удаляет их (развернуть). Итак, как браузер узнает, выборка обернута тегами или нет? Если браузер знает, почему это так сложно сделать с помощью JS?

1 Ответ

2 голосов
/ 27 октября 2011

Это немного сложная область:

  • IE <9 имеет совершенно другой API для выбора и диапазонов из других браузеров </li>
  • Для получения и последующего оформления выбранного содержимого требуетсянекоторые осторожные манипуляции с DOM

Вот два предложения:

  • Если вы просто хотите переключить жирность выделения, вы можете использовать document.execCommand("bold", false, null)
  • Если вы используете классы CSS вместо свойств / атрибутов элемента style, вы можете использовать модуль применения класса CSS из моей библиотеки Rangy .
...