Question

我正在为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>

Answer 1

您可以使用类似

的内容

 $('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

显示跨越某些单词的跨度并按需替换

1 个答案: