计算拼错单词的数量

Question

I have a project where I need to count the number of misspelled words in a text area and prevent submission of the web form if there are too many misspellings.我有一个项目，我需要计算文本区域中拼错单词的数量，并在拼写错误过多时阻止提交 Web 表单。 The JavaScript editor, tinyMCE is used for the entry form. JavaScript 编辑器 tinyMCE 用于输入表单。 A PHP script, spellcheckText.php, counts the misspellings, if any, and returns a JSON encoded result back to the brows. PHP 脚本 spellcheckText.php 会计算拼写错误（如果有），并将 JSON 编码的结果返回给眉毛。 Code example below:下面的代码示例：

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Test</title>
        <link rel="stylesheet" src="/simages/css/bootstrap/3.3.7/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="/simages/scripts/js/tinymce/js/tinymce/tinymce.min.js"></script>
        <script>
            tinymce.init({
                selector: ".standard-editor",
                plugins: "wordcount spellchecker",
                paste_as_text: false,
                theme: "modern",
                branding: false,
                content_style: ".mce-content-body {font-size:16px;font-family:Arial,sans-serif;}",
                browser_spellcheck: true,
                toolbar: "undo redo",
                spellchecker_rpc_url: '/simages/spellchecker/spellchecker.php',
                menubar: "tools",
                statusbar: true,
                height: "400",
                width: "600",
                paste_data_images: false,
                paste_enable_default_filters: false,
                paste_preprocess: function(plugin, args) {
                    args.content = '';
                }
  
            });
        </script>
        <script type="text/javascript">
            function checkWordCount() {
                var wordCount = tinyMCE.activeEditor.plugins["wordcount"].getCount();
                if (wordCount < 50) {
                    alert("Need 50 words or greater for your text submission...");
                    return false;
                }
                var essayContent = tinyMCE.activeEditor.getContent({format: 'text'});
                function getSpellCount(essayContent){
                    return new Promise((resolve,reject) => {
                        jQuery(function(\$) {
                            var values = { 'str': essayContent };
                            \$.ajax({
                                type: "POST",
                                url: "/path/to/spellcheckEssay.php",
                                data: values,
                                success: resolve,
                                error: reject,
                            })
                        });
                    })
                }
                var percentage = getSpellCount(essayContent);
                percentage.then(function(result){
                    console.log(result);
                    var grade = result.percentage;
                    if(grade < 80){
                        alert("Please edit your response.");
                        return false;
                    }else{
                        document.essayform.submit();
                    }
                }).catch(function (error) {
                    console.log('Failed',error);
                });
            }
        </script>
    </head>
    <body>
    <div class="container-fluid">
        <div class="form-group">
            <form method=POST action="/path/to/ajax/textWords.php" name="essayform" id="essayQuestion" onsubmit="event.preventDefault();checkWordCount();">
                <h3>$thesequestions{'Text'}</h3>
                <p>
                    <textarea name="textarea" class="standard-editor" id="essay"></textarea>
                </p>
                <br/>
                <input class="btn btn-primary" type="submit" value="Submit Text"/>
            </form>
        </div>
    </div>
    </body>
    </html>```
I don't do front end coding that often, so don't know if the attempt to post twice in the same form is the problem or something else. Results of this example is a blank page where form's post action is executed. Don't believe that jQuery section is executed.

Open to suggestions for a better method.

Thank you.

**Below is a revision of the original code post**:

    ```<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Test</title>
        <link rel="stylesheet" src="/css/bootstrap/3.3.7/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="/scripts/js/tinymce/js/tinymce/tinymce.min.js"></script>
        <script>
            tinymce.init({
                selector: ".standard-editor",
                plugins: "wordcount spellchecker",
                paste_as_text: false,
                theme: "modern",
                branding: false,
                content_style: ".mce-content-body {font-size:16px;font-family:Arial,sans-serif;}",
                browser_spellcheck: true,
                toolbar: "undo redo",
                spellchecker_rpc_url: '/simages/spellchecker/spellchecker.php',
                menubar: "tools",
                statusbar: true,
                height: "400",
                width: "600",
                paste_data_images: false,
                paste_enable_default_filters: false,
                paste_preprocess: function(plugin, args) {
                    args.content = '';
                }
  
            });
        </script>
        <script type="text/javascript">
            function checkWordCount() {
                var wordCount = tinyMCE.activeEditor.plugins["wordcount"].getCount();
                if (wordCount < 50) {
                    alert("Need 50 words or greater for your text submission...");
                    return false;
                }
                var essayContent = tinyMCE.activeEditor.getContent({format: 'text'});
                function getSpellCount(essayContent){
                    return new Promise((resolve,reject) => {
                        jQuery(function($) {
                            var values = { 'str': essayContent };
                            console.log(values);
                            $.ajax({
                                type: "POST",
                                url: "/path/to/ajax/spellcheckText.php",
                                data: values,
                                success: resolve,
                                error: reject,
                            })
                        });
                    })
                }
                var percentage = getSpellCount(essayContent);
                percentage.then(function(result){
                    console.log(result);
                    var grade = result.percentage;
                    if(grade < 80){
                        alert("A number of misspelled words were detected. Please correct and submit again.");
                        return false;
                    }
                }).catch(function (error) {
                    console.log('Failed',error);
                });
            }
        </script>
    </head>
    <body>
    <div class="container-fluid">
        <div class="form-group">
            <form method=POST action="/path/to/ajax/textWords.php" name="essayform" id="essayQuestion" onsubmit="event.preventDefault();checkWordCount();">
                <h3>$thesequestions{'Text'}</h3>
                <p>
                    <textarea name="textarea" class="standard-editor" id="essay"></textarea>
                </p>
                <br/>
                <input class="btn btn-primary" type="submit" value="Submit Text"/>
            </form>
        </div>
    </div>
    </body>
    </html>```

Answer 1

Below is the revised code.下面是修改后的代码。 The path to the solution was pointed out by Taplar where I was returning false incorrectly. Taplar 指出了解决方案的路径，我错误地返回了 false。 Also accessing the tinyMCE data correctly helps make things work.正确访问 tinyMCE 数据也有助于使事情顺利进行。

```<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <link rel="stylesheet" src="/simages/css/bootstrap/3.3.7/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="/scripts/js/tinymce/js/tinymce/tinymce.min.js"></script>
    <script>
        tinymce.init({
            selector: ".standard-editor",
            plugins: "wordcount spellchecker",
            paste_as_text: false,
            theme: "modern",
            branding: false,
            content_style: ".mce-content-body {font-size:16px;font-family:Arial,sans-serif;}",
            browser_spellcheck: true,
            toolbar: "undo redo",
            spellchecker_rpc_url: '/path/to/spellchecker/spellchecker.php',
            menubar: "tools",
            statusbar: true,
            height: "400",
            width: "600",
            paste_data_images: false,
            paste_enable_default_filters: false,
            paste_preprocess: function(plugin, args) {
                args.content = '';
            }

        });
    </script>
    <script type="text/javascript">
        function checkWordCount() {
            var wordCount = tinyMCE.activeEditor.plugins["wordcount"].getCount();
            if (wordCount < 50) {
                alert("Need 50 words or greater for your text submission...");
                return false;
            }
            var essayContent = tinyMCE.activeEditor.getContent({format: 'text'});
            function getSpellCount(essayContent){
                return new Promise((resolve,reject) => {
                    jQuery(function($) {
                        var values = { 'str': essayContent };
                        console.log(values);
                        $.ajax({
                            type: "POST",
                            url: "/path/to/ajax/spellcheckText.php",
                            data: values,
                            success: resolve,
                            error: reject,
                        })
                    });
                })
            }
            var percentage = getSpellCount(essayContent);
            percentage.then(function(result){
                console.log(result);
                var grade = result.percentage;
                if(grade < 80){
                    alert("A number of misspelled words were detected. Please correct and submit again.");
                    return false;
                }
            }).catch(function (error) {
                console.log('Failed',error);
            });
        }
    </script>
</head>
<body>
<div class="container-fluid">
    <div class="form-group">
        <form method=POST action="/path/to/ajax/textWords.php" name="essayform" id="essayQuestion" onsubmit="event.preventDefault();checkWordCount();">
            <h3>$thesequestions{'text'}</h3>
            <p>
                <textarea name="textarea" class="standard-editor" id="essay"></textarea>
            </p>
            <br/>
            <input class="btn btn-primary" type="submit" value="Submit Text"/>
        </form>
    </div>
</div>
</body>
</html>```

计算拼错单词的数量

问题描述

1 个解决方案

解决方案1
0 2020-06-28 22:55:58

计算拼错单词的数量

问题描述

1 个解决方案

解决方案1 0 2020-06-28 22:55:58

解决方案1
0 2020-06-28 22:55:58