javascript - showing suggestions for spell checker in content-editable div - Stack Overflow

admin管理员组

文章数量:1323702

I am developing spell checker for an Indian Language. So far the spell checker is able to find the wrongly spelt words.

I am using a content-editable div for this purpose.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.

Iam having a suggestion generator algorithm in perl. I just need to link with javascript .Iam stuck in how to show the suggestions(draw the menu at the cursor).I found some code after searching Google.But could not go further.

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

I am developing spell checker for an Indian Language. So far the spell checker is able to find the wrongly spelt words.

I am using a content-editable div for this purpose.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.

Iam having a suggestion generator algorithm in perl. I just need to link with javascript .Iam stuck in how to show the suggestions(draw the menu at the cursor).I found some code after searching Google.But could not go further.

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

• javascript
• html
• spell-checking
• right-click

Share Improve this question Follow edited May 13, 2014 at 4:14 Nagaraju asked May 5, 2014 at 10:06 NagarajuNagaraju 1,87522 gold badges2828 silver badges4848 bronze badges 6

• Can you precise your question: is your problem to draw the menu where the cursor is? Or is it to show the suggestions related to the word where the cursor is? Or both? :) – Djizeus Commented May 12, 2014 at 14:26
• @Djizeus My question is to draw the menu at the cursor – Nagaraju Commented May 13, 2014 at 4:12
• @Raju so what is the difference with this other question from you: stackoverflow./questions/23559003/… ? – Djizeus Commented May 13, 2014 at 6:01
• After some time in Google I had created a menu using javascript.Its not working in google-chrome but is working well in firefox. – Nagaraju Commented May 13, 2014 at 6:03
• Then you should either close this question if the remaining problem is in the other question, or edit your question to state what the problem is exactly. – Djizeus Commented May 13, 2014 at 7:05

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 3 +50

You could use jQuery to promise your goal. I've created a very simple example, but with a bit of effort you could make it as you want to(prevent multiple contextmenu's, styling, load the items dynamically, ...).

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/4gWjM/

You just need to use spellcheck="true" on your div

Ex. <div spellcheck="true"><input type="text" name="fname" ></div>

Reference site

Reference site 2

Edit: I forget to give the link of the second one

How about something like this: http://jsfiddle/974Dm/

It doesn't build the whole menu, but it does give you the misspelled word on right click.

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();
    }
});

Update: In order to create the suggestions menu, you will need to use AJAX.

本文标签： javascriptshowing suggestions for spell checker in contenteditable divStack Overflow