1

I am trying to implement something like the "Change/Remove Link" in Gmail/Google Docs richtext WYSIWYG edtior, when you type a URL, a div shows underneath it says "Goto Link, Change, Remote"

How could I write something like that using jQuery?

  1. How to get row and column of cursor?
  2. how can I calculate font width and height (especially non-fixed width font with some Bold/Italic style)
  3. How to make sure the DIV appears at the start of a word?

Thank you in advance!

General Grievance
  • 4,555
  • 31
  • 31
  • 45
est
  • 11,429
  • 14
  • 70
  • 118
  • looking at google results, most of which didn't help very much. – est Apr 22 '11 at 04:14
  • You're suggesting you're building a WYSIWYG editor. Are you sure you want to use a `textarea`? Textareas don't support HTML. – Dan Dascalescu Mar 17 '14 at 12:58
  • possible duplicate of [How do I get the (x, y) pixel coordinates of the caret in text boxes?](http://stackoverflow.com/questions/29709/how-do-i-get-the-x-y-pixel-coordinates-of-the-caret-in-text-boxes) – Andrew Mao Mar 18 '14 at 00:24

2 Answers2

6

Answer: http://jsfiddle.net/morrison/57BR3/

What it does:

  • Creates div positioned near hyperlink.
  • Looks like Google docs box.
  • Ability to change text and url.
  • Remove is implemented.

What it does not do:

  • Work on textarea. Textareas don't support html as they are plain text. This is a complex process to work-around. Find a library, then implement my answer.
  • Open when your cursor gets moved onto it by arrowkeys. Doesn't work because of above item.
Levi Morrison
  • 19,116
  • 7
  • 65
  • 85
  • @Levi works great but is there any particular reason using $body.delegate('#main a', 'click', function(e) { ....... instead of using simple $('#main a').click()? – Burak Erdem Apr 22 '11 at 09:40
  • Yes, actually. Your way creates multiple event handlers. My way has one. Additionally, when you click off of the element, you want it to go away. I accidentally removed that piece of code from the fiddle, but it's back in now. If you bind on #main the click doesn't work properly. Try changing the $body.delegate to $('#main') and it will fail. Never did figure out why. If you can solve this, please clue me in on the solution. – Levi Morrison Apr 22 '11 at 09:47
  • @Levi Morrison Thanks a lot man, I can learn a lot from your code. But do you know any way to calculate cursor position? My question was intend to make something like autocomplete/autosuggest dropdown menus in VisualStudio/Eclipse, thus I have to get the whole "word" before the cursor, in both IE and other browsers. For example I type `window.` in a textarea, the cursor stays after the `.`, but I need to grab the nearest text before the cursor: `window`, with some AJAX calls I can display a div right under the word `window` and user can choose something from list of items. – est Apr 22 '11 at 10:13
  • @est I'm not sure I fully understand what you are saying, but to get the position of an event you can use e.pageX and e.pageY – Levi Morrison Apr 22 '11 at 10:25
  • @est This would create a lot of DOM elements, but if every word was wrapped in a span tag, you could use a delegate on it's parent and do $parent.delegate('span', 'click', funciton(e){}); That's the best answer I can come up with at the moment. – Levi Morrison Apr 22 '11 at 10:31
  • Updated jsfiddle. I removed an unnecessary if statement inside of delegate. It was left-over from a previous method of solving the problem. – Levi Morrison Apr 22 '11 at 10:33
0

You're suggesting you're building a WYSIWYG editor. Are you sure you want to use a textarea? Textareas don't support HTML. To answer your later comment, the best way to get the (x, y) position of the caret in a text area is to use the textarea-caret-position plugin.

Community
  • 1
  • 1
Dan Dascalescu
  • 143,271
  • 52
  • 317
  • 404