Добавить функциональность элемента формы в contenteditable div

Question

Я использую библиотеку MooTools Javascript. И эта библиотека дает здесь несколько действительно полезных функций: http://mootools.net/docs/more/Element/Element.Forms

Проблема в том, что эти функции работают только для таких элементов формы, как textarea и т. Д.

Сейчас я делаю онлайн-редактор, и для самого редактора я использую элемент div и функциональность редактирования контента.

Когда я хочу использовать такие функции, как getCaretPosition в библиотеке mootools (more), эта строка вызывается:

var range = this.getDocument().selection.createRange();

Но чем я получаю эту ошибку:

this.getDocument().selection is undefined

Кажется, что только элементы формы имеют этот объект выбора (в этом документе: S?).

Есть ли способ добавить функциональность формы в элемент (ы) div (или все)?

Answer 1

это не сработает так просто, я боюсь.посмотрите на исходный код

, например, setSelectionRange имеет два утверждения: 1: у него type == "text" (следовательно, вход) или 2: у него есть свойство .value, которое он может прочитать.если вы примените это к элементу, который не имеет ни одного, он просто не будет работать.

Вы можете искать идеи в другом месте - например, этот фрагмент кода Дэвида Уолша может быть полезен:

http://davidwalsh.name/text-select-widget

он просто делает:

var getSelection = function() {
    return $try(
        function() { return window.getSelection(); },
        function() { return document.getSelection(); },
        function() {
            var selection = document.selection && document.selection.createRange();
            if(selection.text) { return selection.text; }
            return false;
        }
    ) || false;
};

удачи - вот очень элементарный пример, который я собрал на скорую руку, он обеспечивает получение выделения и возможную позицию каретки (на основе последнего символа выбора) в качестве смещения родительского элемента - http://www.jsfiddle.net/82czp/1/

Answer 2

Я обнаружил эту функциональность в проекте Javascript под названием CodeMirror (http://marijn.haverbeke.nl/codemirror/, также используется в jsfiddle).Отличный проект!