Show span on hover over some word and replace on demand

Question

I'm working on a spellchecker plugin for TinyMCE (3.x series). When user clicks on plugin to spellcheck I take the editor's content and send it to server, then from server I send the data back with underlining the wrong words and a list of suggestions (which is hidden). It works fine and on TinyMCE interface I see wrong words with red underline.

Now I want to show list of suggestions when user hovers (left-click is also fine) over the wrong word so that he can pick the correct word and replace it with wrong word. Can anyone guide me how should I proceed on this?

Textarea content: Fourr guys went to watc movie yesterday.

HTML: <p>Fourr guys went to watc movie yesterday.</p>

After clicking on plugin the HTML becomes:

<p>
   <span style="color: red; text-decoration: underline;">Fourr</span>
   <span class="suggestions" style="display: none;">Fore Furor Furry Fourier Four Farr Fora Fury
   Fours Fire Firer Fuhrer Fiori Fourth Dourer Fouler Foyer Fayre Fairer Fr Flour Fort Furrow  
   Purr</span> guys went to 
   <span style="color: red; text-decoration: underline;">watc</span>
   <span class="suggestions" style="display: none;">WAC Wac Wat watch Watt watt WATS</span>
   movie yesterday.
</p>

Probably using JQuery? If so - I would consider some overlay div with (select) values, event delegation on click would change selected text... — nettutvikler, Oct 30 '14 at 08:52

score 1 · Accepted Answer · edited May 23 '17 at 12:13

1

You can use something like

 $('span').not('.suggestions').click(function(){
     $(this).next('span').toggle();
 })

And the you'll need some sort of list from which you can select your option. Because from span it will be harder to select, but still possible, look here.

For changing just save your clicked span in some sort of variable and then replace the text in in with chosen one like

var $this;
 $('span').not('.suggestions').click(function(){
     $this = $(this);
     $(this).next('span').toggle();
 })

And then after choosing a word

$this.text(yourTextChosenVar)

UPD Added Fiddle with a little bit formated suggestions list.

UPD2 Complete fiddle

edited May 23 '17 at 12:13

Community

1
1

answered Oct 30 '14 at 09:11

Y.Puzyrenko

2,166
1
15
23

Thanks, this looks promising, I'll try and update with results. BTW here's the fiddle with what you suggested: http://jsfiddle.net/chankeypathak/71ka00n7/2/ – Chankey Pathak Oct 30 '14 at 10:11
I have made this: http://jsfiddle.net/chankeypathak/71ka00n7/4/ Now how can I replace the wrong word? – Chankey Pathak Oct 30 '14 at 10:23
Amazing! Thanks. That's a complete answer to my question. – Chankey Pathak Oct 30 '14 at 10:43

Show span on hover over some word and replace on demand

1 Answers1