How can I get text under mouse pointer WebBrowser control?

Question

I'm currently working on WYSIWYG editor using .net WebBrowser control and I need to implement spell checking.

My question is how can I get text under mouse pointer when I right click on the misspelled word to show all spell suggestions?

Tried to wrap every misspelled word in html label with javascript event, but there seems to be the problem in invoking C# code from javascript.

Answer 1

Ok - here are my 2 cents.

Firstly I imagine you have an editable element more than likely a div and you're using this as your WYSIWYG editor. I also guess you have an Ajax function somewhere that you've setup on a certain keystroke to check the spelling of the entire (maybe even some) of the contents of the DIV, and it can send you back a list of the misspelled words.

My idea is - 1. Create a range on the contents of your editable div, then do a search for the word using the TextRange object - here : http://msdn.microsoft.com/en-us/library/ms535872%28VS.85%29.aspx . Use the findText method which Searches for text in the document (range) and positions the start and end points of the range to encompass the search string.

Once you have this you should copy the text value into a variable, then construct a < Span> possibly even set the bottom-border style of the span to have a red underline, or even use an image so that it looks like that regular misspelled squiggly wave. Set the inner contents of this Span to the value of the original misspelled word. Also don't forget to assign an onclick (or right click) to this SPAN, so you can do another lookup on spelling suggestions later. Great, now you have an offline SPAN but its not yet inserted into the document.

Next step: Use the TextRange pasteHTML method to paste the new SPAN into the document, remember the range should already be defined from the find operation, so you shouldn't have to mess around looking for the text again (or selecting it).

Once the span is in the document using pasteHTML, it should be straight forward, just create another div, absolutely position it just under the SPAN so when the user right clicks it - the "context menu comes up" - populated by Ajax.

After that it should be a very easy case of creating another range, and replacing this time the SPAN with just straightforward text.

ALL of this is theory, but hope it helps!

Also you might want to check out - http://www.aspfree.com/c/a/Code-Examples/Searching-Body-Text-with-textRange-Enter-the-Gecko/ - which will help you make the whole solution work in FireFox (not only IE)

Answer 2

I'll add some more two cents in as I'm currently working on something similar.

Okay, so I'm assuming you are a WebBrowser object? If so, my suggestion would be to use a contextual menu strip every time you every time you right click. From there you can fire the context menu Opening event that will grab that specific HTML element for you.

In short you could use a similar code snippet

    Point mouseLocation;

    private void ToolStripMenuItem_Click(object sender, EventArgs e)
    {
        HtmlElement elem = webBrowser.Document.GetElementFromPoint(mouseLocation);
        //From here you would do what ever it is you need for your element in the browser
    }

    private void webContextMenuStrip_Opening(object sender, CancelEventArgs e)
    {
        //This just gets you the specific mouse position for the given element
        mouseLocation = webBrowser.PointToClient(MousePosition);
    }

Hope this atleast gets you started and best of luck!