contenteditable = "true": создание синтаксиса с выделенной формой ввода

Question

В настоящее время я возлюсь с contenteditable = "true", чтобы создать выделенное поле ввода синтаксиса.Я пишу плагин jquery, который преобразует тег <input> в контейнер <div contenteditable="true">.Подробно, он скрывает <input> и вставляет контейнер <div> после него.

В моем скрипте функция выделения представляет собой простую функцию замены, чтобы выделить все 'И в контейнере.Вот моя скрипка:

http://jsfiddle.net/3Rhz8/2/

Если содержимое контейнера изменяется, плагин должен

• синхронизировать содержимое с содержимым ввода
• обновить подсветку синтаксиса

В моем примере я просто слушаю событие keyup.Теперь возникает проблема, когда я хочу обновить подсветку синтаксиса контейнера.Когда ввод изменяется с помощью .html() или свойства контейнера innerHTML, состояние курсора сбрасывается.Есть ли способ предотвратить это, или я могу сохранить / восстановить позицию курсора?

Answer 1

Существует прекрасный API для сохранения и восстановления позиции курсора: http://code.google.com/p/rangy/

Это сложный API. Все, что вам нужно сделать, это

var savedSel = rangy.saveSelection();

для сохранения позиции курсора, а затем

rangy.restoreSelection(savedSel);

для восстановления позиции курсора. Вы можете прочитать больше об этом здесь: http://code.google.com/p/rangy/wiki/SelectionSaveRestoreModule