jQuery获取textarea cursor / caret X，Y位置并在下面显示DIV

Question

我正在尝试在Gmail / Google Docs richtext WYSIWYG edtior中实现类似“更改/删除链接”的内容，当您输入网址时，下方显示的div显示“转到链接，更改，远程”

我怎么能用jQuery写这样的东西？

1. 如何获取光标的行和列？
2. 如何计算字体宽度和高度（特别是非固定宽度字体，带有一些粗体/斜体样式）
3. 如何确保DIV出现在单词的开头？

提前谢谢！

Answer 1

答案：http://jsfiddle.net/morrison/57BR3/

它的作用：

• 创建位于超链接附近的div。
• 看起来像Google文档框。
• 能够更改文字和网址。
• 删除已实施。

不做的事情：

• 在textarea工作。 Textareas不支持html，因为它们是纯文本。这是一个复杂的解决方法。找一个图书馆，然后实现我的答案。
• 当光标被箭头键移动到光标上时打开。由于上述项目不起作用。

Answer 2

您建议您重建WYSIWYG编辑器。你确定要使用textarea吗？ Textareas不支持HTML。要回答later comment，在文本区域中获取插入符号（x，y）位置的最佳方法是使用textarea-caret-position plugin。