JQuery :: Showing Context Menu In ContentEditable Div?

have a contentEditable div with following text for example:

[Code]....

Now for example if user clicks on 'm' in word document I want to show a context menu containing few text choices. That context menu will be contained in a div element. I want to replace the word "document" with the option(text) selected by user from context menu. In my view I have to find absolute position of click to show context menu and then I have to find space elements before and after the caret position and then replace the selection with option selected from context menu. how I can do it using JavaScript and jQuery? one part of my question is about context menu and other the more important is how i can detect the word on wchich user has clicked on in contentEditable div or in text area on the other hand.

actually i want to make a similar transliteration application like google's. the process of script onversion from roman to Urdu has been done however i m facing lot of problems in user interface development on the web. google transliteration application can be found here.