полный мрак с позицией курсора в 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, время: 14:28. |