полный мрак с позицией курсора в editable div
очень долго искал решение которое может отыскать позиции курсора в таком div для того чтобы в свою очередь найти координаты выделения, а это для работы с содержимым в стиле редактора wysiwyg.
Нашел с огромным трудом кое как работающую процедуру - но потом оказалось что если в диве был нажат enter(перевод текста на другую строку) то она допускает грубую ошибку в позиции. Подскажите пожалуйста саму концепцию, в какую сторону копать чтобы получить возможность через innerhtml нормально оперировать с выделенным текстом. |
Попробуйте поискать по фразе "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> |
я бы и сам с удовольсвтием получал то что вы предлагаете. да вот беда: если выделенный элемент в тексте повторяется это не работает. а что если к примеру пользователь выделит одну букву?
|
Да - это ад и полная ж. Сраный 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, время: 11:53. |