将鼠标悬停在某个单词上并按需更换

我正在为TinyMCE（3.x系列）开发拼写检查插件。当用户点击插件进行拼写检查时，我将编辑器的内容发送给服务器，然后从服务器发回数据，并加上错误的单词和建议列表（隐藏）。它工作正常，并在TinyMCE界面上看到红色下划线的错误单词。将鼠标悬停在某个单词上并按需更换

现在我想在用户将鼠标悬停（左键单击也很好）时显示错误的单词，以便他可以选择正确的单词并用错误的单词替换它。任何人都可以指导我如何继续？

textarea的内容：Fourr guys went to watc movie yesterday.

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

点击插件的HTML后变为：

<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>

来源

2014-10-30 Chankey Pathak

可能使用JQuery？如果是这样 - 我会考虑一些覆盖div与（选择）值，单击事件代表将改变选定的文本... – nettutvikler 2014-10-30 08:52:01

您可以使用类似

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

而且你”我需要一些列表你可以选择你的选项。因为从跨度很难选择，但仍有可能，看看here。

为了改变只保存在某种变量您点击跨度，然后选择一个替换的文字在像

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

，然后选择一个字

$this.text(yourTextChosenVar)

UPD后添加Fiddle一点点的格式化建议列表。

UPD2完成fiddle

来源

2014-10-30 09:11:39

谢谢，这看起来很有希望，我会尝试并更新结果。顺便说一句，这里是你的建议小提琴：http://jsfiddle.net/chankeypathak/71ka00n7/2/ – 2014-10-30 10:11:16

我做了这个：http://jsfiddle.net/chankeypathak/71ka00n7/4/现在我怎么可以替换错误字？ – 2014-10-30 10:23:38

@ChankeyPathak查找我的更新。 – 2014-10-30 10:40:19

将鼠标悬停在某个单词上并按需更换

回答

相关问题