Contenteditable / JQuery - получить положение Carret и выяснить, какие элементы его внутри - PullRequest
Новая
       42

Contenteditable / JQuery - получить положение Carret и выяснить, какие элементы его внутри

3 голосов
/ 09 августа 2011

Я дал форуму хороший поиск по этому вопросу и не могу найти конкретный ответ.

У меня есть div, который можно редактировать, у меня есть 3 кнопки вверху (жирный, курсив, подчеркивание), которые применяют execCommand к выделенному тексту в div.

У меня также есть несколько событий щелчка, чтобы отслеживать, что нажимается внутри div, чтобы выделить соответствующие кнопки вдоль верхней части, что прекрасно работает (игнорируйте неверный xhtml и придерживайтесь теории): 

$("[contenteditable]").delegate("u", "click", function (evt) {
    $("[command='underline']").addClass('on');
});

Если вы случайно щелкнули подчеркнутый текст в div, кнопка подчеркивания получает стиль 'on'.

Моя проблема заключается в том, что теперь мне нужно создать аналогичный фрагмент кода, который отслеживает, где находится каррет, который выполняет ту же работу, что и выше, вместо щелчка (если пользователь использует клавиши со стрелками для перемещения по элементу div), это можно вызвать с помощью этого бита кода: 

$("[contenteditable]").bind("keypress",function(e){
      //something about where the caret is and whats around it here
});

но вот где я застрял, я не знаю, как получить родительские теги или какие-либо другие теги, в зависимости от того, что внутри может быть каре, чтобы выделить соответствующие кнопки вверху.

(Я думаю, что если есть решение для этой проблемы, я мог бы отказаться от функции щелчка с разделением, потому что новая функция положения карреты все равно будет работать)

Действительно ценю любую помощь, которую могут оказать люди, работая над ней в течение 3 дней.

======

Какая головная боль !!! Но я решил это !!!!!! 

$('[contenteditable]').keydown(function() {
    thiselement = window.getSelection().anchorNode.parentNode;
    $(thiselement).trigger('click');
});

То, что это сделает, вызовет правильную функцию щелчка, о которой я упоминал ранее для соответствующего тега!

1 Ответ

4 голосов
/ 09 августа 2011

Вместо того, чтобы делать все это вручную, в браузере есть методы, чтобы сообщить вам, является ли текущий выбор или каретка жирным шрифтом, курсивом или чем-либо другим: document.queryCommandState() ( MSDN ), для двоичных команд, таких какполужирный и курсив, и document.queryCommandValue() ( MSDN ) для команд со значением, таких как команды, связанные со шрифтами.

Это все еще оставляет проблему обнаружения, когда вам нужно обновитькнопок.Если у вас есть относительно немного, то вы можете сойти с рук, когда это происходит, когда срабатывает событие keyup или mouseup, но это не все поймает (вырезать / копировать / вставить из Edit или контекстного меню, перетаскиваниетекста, например).Вместо этого вы могли бы опросить выбор и содержание, чтобы увидеть, изменился ли какой-либо из них после предыдущей проверки, и обновить свои кнопки, если они были изменены.

...