JQuery получить текстовую курсор / курсор X, Y и показать DIV внизу - PullRequest
1 голос
/ 22 апреля 2011

Я пытаюсь реализовать что-то вроде «Изменить / Удалить ссылку» в редакторе WYSIWYG richtext Gmail / Документов Google, когда вы набираете URL, под ним отображается div, в котором говорится «Перейти к ссылке, Изменить, Удаленный»

Как я мог написать что-то подобное, используя jQuery?

  1. Как получить строку и столбец курсора?
  2. как вычислить ширину и высоту шрифта (особенно шрифт с фиксированной шириной с использованием стиля Bold / Italic)
  3. Как убедиться, что DIV появляется в начале слова?

Заранее спасибо!

Ответы [ 2 ]

6 голосов
/ 22 апреля 2011

Ответ: http://jsfiddle.net/morrison/57BR3/

Что он делает:

  • Создает div, расположенный рядом с гиперссылкой.
  • Похоже на Google Docs Box.
  • Возможность изменить текст и URL.
  • Выполнено удаление.

Что он не делает:

  • Работа над текстовой областью. Текстовые области не поддерживают HTML, поскольку они представляют собой простой текст. Это сложный процесс для обхода. Найдите библиотеку, затем реализуйте мой ответ.
  • Открывается, когда курсор перемещается на него с помощью клавиш со стрелками. Не работает из-за вышеуказанного пункта.
0 голосов
/ 17 марта 2014

Вы предлагаете создать редактор WYSIWYG.Вы уверены, что хотите использовать текстовую область?Текстовые области не поддерживают HTML.Чтобы ответить на ваш последующий комментарий , лучший способ получить (x, y) позицию каретки в текстовой области - использовать плагин textarea-caret-position .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...