Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   полный мрак с позицией курсора в editable div (https://javascript.ru/forum/dom-window/37455-polnyjj-mrak-s-poziciejj-kursora-v-editable-div.html)

Atarion 20.04.2013 19:36

полный мрак с позицией курсора в editable div
 
очень долго искал решение которое может отыскать позиции курсора в таком div для того чтобы в свою очередь найти координаты выделения, а это для работы с содержимым в стиле редактора wysiwyg.
Нашел с огромным трудом кое как работающую процедуру - но потом оказалось что если в диве был нажат enter(перевод текста на другую строку) то она допускает грубую ошибку в позиции.

Подскажите пожалуйста саму концепцию, в какую сторону копать чтобы получить возможность через innerhtml нормально оперировать с выделенным текстом.

wc3banderlog 24.04.2013 19:50

Попробуйте поискать по фразе "javascript: получение выделенного текста".

<script language=javascript>
function getSelText()
{
    if (window.getSelection) {
        return window.getSelection();
    } else if (document.getSelection) {
        return document.getSelection();
    } else if (document.selection) {
        return document.selection.createRange().text;
    } else return;
}
</script>

Atarion 25.04.2013 21:25

я бы и сам с удовольсвтием получал то что вы предлагаете. да вот беда: если выделенный элемент в тексте повторяется это не работает. а что если к примеру пользователь выделит одну букву?

Aetae 26.04.2013 00:20

Да - это ад и полная ж. Сраный contenteditable годится только для создания демок wisiwig и ни на что больше. Любое иное применение требует сотен и сотен костылей. Код на 90% должен состоять из них чтобы работал более менее понятно адекватному человеку. Потому в интернете и нет "простеньких решений" на contenteditable, только многотонные, заточенные под конкретную задачу вещи.
Я нетнавижу contenteditable.

Теперь собсно к теме. Для работы с contenteditable предполагается что не требуется знания какой-то конкретной численной позиции курсора.
Вы получаете getSelection(), у которого есть anchorNode - нода в которой начинается выделение и achorOffset - позиция в этой ноде. Считается что этого вам достаточно для работы.

Конкретно текстовую позицию можо полчить примерно так:
var sel = getSelection(), //получаем выделение
    l = sel.rangeCount, //количество выделений(например с клавишей ctrl)
    ranges = new Array(l); //временный массив range

for(var i = 0; i<l; i++) {
    ranges[i] = sel.getRangeAt(i); //запоминаем все текущие выделения
}

sel.collapseToStart(); //коллапсируем к началу выделения(КО)
sel.extend( elem /*contenteditable-элемент*/, 0); //расширяем выделение до начала редактируемого элемента

var position = sel.toString().length; //получаем длину строки, получившийся из выделенного.

sel.removeAllRanges(); //очищаем выделение

for(var i = 0; i<l; i++) {
    sel.addRange(ranges[i])  //возвращаем как было до
}
И то это только концепт, придётся ешё для каждого браузера понаписать костылей.


Часовой пояс GMT +3, время: 14:41.