將鼠標懸停在某個單詞上並按需更換

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

將鼠標懸停在某個單詞上並按需更換

回答

相關問題