JQuery начать печатать между тегами - PullRequest
Новая
       8

JQuery начать печатать между тегами

0 голосов
/ 08 октября 2010

Я делаю WYSIWYG-редактор, что я хочу сделать, это preventDefault на клавише ввода, и вместо этого, когда нажимается ввод, он создает новую строку с тегами <div></div>. По сути, каждая <div> - это одна строка. Я не знаю, как создать <div> и чтобы указатель начинался между каждым <div>, например: 

<div>Line one here</div> // Press enter
<div>Start typing next line here</div> // When you press Enter, it creates a div and automatically when you start typing its in between the tags.

Затем, после того, как вы снова нажмете новую строку, она просто создаст другую <div> для следующей строки ... Кто-нибудь может помочь? Мне не нужна помощь с preventDefault, просто новое действие, которое нужно предпринять, если нажата Enter.

Ответы [ 2 ]

0 голосов
/ 08 октября 2010

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

Основной подход заключается в следующем:

  1. Захват клавиши Enter и предотвращение поведения браузера по умолчанию.Пока просто.
  2. Используйте DOM Range в большинстве браузеров или TextRange в IE, чтобы получить текущее местоположение каретки из объекта выбора браузера.Немного неудобно в IE.
  3. Создайте новый <div>, если каретка находится в конце текущего <div>, или разделите текущий <div>, если нет.Это не тривиально (подумайте о том, что вам нужно сделать, если, скажем, каретка была внутри вложенных встроенных элементов в <div>), но все еще выполнимо.в начале нового <div>.Вот где он начинает работать неправильно: WebKit не позволит вам поместить каретку в начале текстового узла , и у IE есть свои проблемы с этим, подробности о которых я сейчас забыл.

Это сложно.Посмотрите, что делают большие редакторы (TinyMCE, CKEditor), чтобы справиться с этим.

0 голосов
/ 08 октября 2010

создать div в jQuery: 

$('<div/>)

Поместите его после текущего div ("obj" должно быть задано event.target при нажатии клавиши) 

$('<div/>).insertAfter(obj);

Поканезависимый от браузера.

Чтобы разместить указатель, вы можете использовать TextRanges.Они дают вам возможность перемещать указатель.Есть две разные реализации:

IE: http://msdn.microsoft.com/en-us/library/dd347140%28v=VS.85%29.aspx
Другие: http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html

...