在可编辑的div中显示拼写检查器建议

Question

我正在开发一个印度语言的拼写检查程序。到目前为止，该拼写检查器能够找到错误拼写的单词。

我使用可编辑内容的 div 来实现这个功能。因此，现在当用户右键或选择错误的单词时，需要显示建议来替换错误的单词或者直接忽略它。

我在 perl 中有一个建议生成算法，只需要与 JavaScript 进行链接即可。我卡在了如何展示建议上（在光标处绘制菜单）。我在谷歌上搜索后找到了一些代码。但是无法继续进行下去。

<script type="text/javascript">
    if (document.addEventListener) {
        document.addEventListener('contextmenu', function(e) {
            alert("You've tried to open context menu"); //here you draw your own menu
            e.preventDefault();
        }, false);
    } else {
        document.attachEvent('oncontextmenu', function() {
            alert("You've tried to open context menu");
            window.event.returnValue = false;
        });
    }
</script>

- Nagaraju

---

你能明确一下你的问题吗：你的问题是要在光标所在位置绘制菜单吗？还是要显示与光标所在单词相关的建议？还是两者都需要？ :) - Djizeus

@Djizeus 我的问题是在光标处绘制菜单。 - Nagaraju

@Raju 那么这个问题与您的另一个问题有什么不同：http://stackoverflow.com/questions/23559003/menuitem-and-contextmenu-crossbrowser-compatability？ - Djizeus

在谷歌搜索一段时间后，我使用 JavaScript 创建了一个菜单。它在 Firefox 中运行良好，但无法在 Google Chrome 上工作。 - Nagaraju

那么，如果剩下的问题在其他问题中，则应关闭此问题；或者编辑您的问题以准确说明问题所在。 - Djizeus

@Djizeus 我怎样才能关闭这个问题并且不删除相关答案？ - Nagaraju

Answer 1

你可以使用jQuery来实现你的目标。我创建了一个非常简单的示例，但是通过一些努力，你可以根据自己的需要进行修改（防止多个上下文菜单，样式，动态加载项目等）。 HTML <div id="context">lalalalala</div> Javascript

$(document).ready(function(){
    $('#context').on('contextmenu', function(e){
        var content = $('#context').html();
        var temp = content + 
                   '<div style="background-color: #CCC; color: #000; width: 150px; padding: 5px;">\
                        <h4>Suggestions</h4>\
                            <ul class="suggestions">\
                                <li>first suggestion</li>\
                                <li>second suggestion</li>\
                                <li>third suggestion</li>\
                            </ul>\
                    </div>';
        $('#context').html(temp);

        $('.suggestions li').on('click', function(e){
            $('#context').html($(this).text());
        });
        e.preventDefault();
    });
});

http://jsfiddle.net/4gWjM/

- GuyT

---

好的回答，正是我所需要的。 - Nagaraju

Answer 2

这样的代码怎么样：http://jsfiddle.net/974Dm/

它不会构建整个菜单，但它可以在右键单击时给您拼写错误的单词。

var editor = document.getElementById("editor");

editor.addEventListener("contextmenu", function(event) {
    var misspelling = event.target;

    while (misspelling && misspelling.className != "misspelled") {
        misspelling = misspelling.parentNode;
    }

    if (misspelling) {
        // Show your suggestions menu
        // misspelling is <span class="mispelled">abc</span>
        console.log("Show suggestions for " + misspelling.innerHTML, misspelling);
        event.preventDefault();
    }
});

更新：为了创建建议菜单，您需要使用AJAX。

- Greg Burghardt

---

我卡在显示建议菜单这一步了 @Greg Burghardt - Nagaraju

嗨，@Raju！我认为这是一个好方法。你只需要使用一些插件来实际呈现拼写错误单词的下拉菜单。例如，你可以使用像这样的东西：http://jqueryui.com/menu/。而且你也可以像Greg建议的那样通过AJAX加载建议列表。 - Slava Fomin II

@SlavaFominII 我已经在使用AJAX，现在我使用document.createElement('menu')创建了我的菜单，但在Chrome中无法工作。链接：http://stackoverflow.com/questions/23559003/menuitem-and-contextmenu-crossbrowser-compatability - Nagaraju

Answer 3

你只需要在你的

中使用spellcheck="true"即可。

例如：<div spellcheck="true"><input type="text" name="fname" ></div> 参考网站： - 网站1 - 网站2 编辑：我忘记给出第二个网站的链接了。

- SagarPPanchal

---

实际上，我想将我的算法创建的建议添加到右键菜单中。 将拼写检查设置为true将给浏览器提供建议。 - Nagaraju

问题提问者说：“到目前为止，拼写检查器能够找到错误拼写的单词。”。您提供的代码也是这样做的，现在他问道：“那么现在我需要在用户右键单击或选择错误单词时显示建议，以便替换错误拼写的单词或忽略它。”。 - Daan

@SagarPanchal，你能给一些参考网站，在右键菜单中提供建议吗？你提到的那个网站有它自己的建议。 - Nagaraju

@SagarPanchal 我已经检查过了。它有自己的建议生成功能。 - Nagaraju

@Raju，你想要自己的建议列表吗？ - SagarPPanchal

是的，我卡在了如何在右键菜单中显示它们的问题上。 - Nagaraju