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

【问题标题】：showing suggestions for spell checker in content-editable div在内容可编辑的 div 中显示拼写检查器的建议
【发布时间】：2014-06-21 14:25:14
【问题描述】：

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

我为此目的使用了一个内容可编辑的 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>

【问题讨论】：

您能否准确地回答您的问题：您的问题是在光标所在的位置绘制菜单吗？还是显示与光标所在单词相关的建议？或两者？ :)
@Djizeus 我的问题是在光标处绘制菜单
@Raju 那么与您提出的另一个问题有什么区别：stackoverflow.com/questions/23559003/…？
在 Google 工作了一段时间后，我使用 javascript 创建了一个菜单。它不能在 google-chrome 中运行，但在 Firefox 中运行良好。
那么如果剩下的问题在另一个问题中，你应该关闭这个问题，或者编辑你的问题以说明问题到底是什么。

标签： javascript html spell-checking right-click

【解决方案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/

【讨论】：

好回答我需要的那种

【解决方案2】：

你只需要在你的div上使用spellcheck="true"

例如。 <div spellcheck="true"><input type="text" name="fname" ></div>

Reference site

Reference site 2

编辑：我忘了给第二个的链接

【讨论】：

其实我想将我的算法创建的建议添加到右键菜单中。提供拼写检查 =true 将为浏览器提供建议。
提问者说：So far the spell checker is able to find the wrongly spelt words.。你给的代码也是这样，现在他问：So now I need to show the suggestions for wrongly spelt words whenever the user right clicks or selects the wrong word suggestions are to be shown to replace with the wrongly spelt words or simply ignore it.。
@SagarPanchal 你能提供一些参考网站，通过右键菜单提供建议吗？你引用的网站有自己的建议。
@SagarPanchal 我查过了。它有自己的建议生成。
@Raju，你想要自己的建议列表吗？

【解决方案3】：

这样的事情怎么样：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
嘿@Raju！我认为这是一个很好的方法。您只需要使用一些插件来实际呈现拼写错误的单词的下拉菜单。你可以使用这样的东西：例如jqueryui.com/menu。您可以按照 Greg 的建议通过 AJAX 加载建议列表。
@SlavaFominII 我已经在使用 AJAX，现在我使用 document.createElement('menu') 创建了我的菜单，这在 chrome 中不起作用。链接：stackoverflow.com/questions/23559003/…