Как установить размеры шрифта CSS в contenteditable элементе? - PullRequest
Новая
       0

Как установить размеры шрифта CSS в contenteditable элементе?

2 голосов
/ 04 января 2012

Я хочу создать небольшой редактор HTML с JavaScript, в котором я могу установить размер шрифта выделенного текста для некоторого определенного значения CSS.В соответствии с документацией размер шрифта задается командой FontSize следующим образом: 

document.execCommand("FontSize", false, x);

x должен иметь размер шрифта от 1 до 7. В результате выбранный контент переносится <font size="x" /> элемент.Это не очень полезно, потому что я хочу создать выпадающий список с гораздо большим размером шрифта, чем 7, и я хочу использовать пиксели в качестве единицы размера шрифта, поэтому в конце я хочу, чтобы выделенный текст был обернут элементом <span style="font-size:25px" />.Как мне это сделать?

Я искал уже существующие компоненты редактора HTML, но нашел только два типа библиотек: БОЛЬШИЕ вещи, такие как CKEditor , которые могут делать то, что я хочу, но которые оченьк большим для моей цели и маленьким библиотекам, которые поддерживают только эти 7 размеров шрифта.

Так, как я могу установить пользовательские размеры шрифта в contenteditable HTML-элементе?Он должен работать в последних версиях Firefox и Chromium, а также в IE7-9.

1 Ответ

3 голосов
/ 09 февраля 2012

Вы можете попробовать использовать Rangy для этого. Это кросс-браузерная библиотека, которая пытается устранить ошибки и несоответствия с диапазонами / выбором во всех браузерах. http://code.google.com/p/rangy/

  1. получить диапазон из выбора
  2. range.extractContents () и сохраните в var
  3. вставить новый узел span (с идентификатором) - range.insertNode (node)
  4. jQuery обновляет новый узел с шагом 2, например, $ ( "# Spanid"). HTML (docFragment)

См. Все методы диапазона здесь: http://code.google.com/p/rangy/wiki/RangyRange#Methods

...