我有一个项目，我需要计算文本区域中拼写错误的单词的数量，并在拼写错误过多的情况下阻止提交Web表单。 JavaScript编辑器tinyMCE用于输入表单。一个PHP脚本spellcheckText.php会计算拼写错误（如果有），并将JSON编码的结果返回给浏览器。下面的代码示例：
<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>```
答案 0 :(得分：0)
下面是修改后的代码。 Taplar指出了解决方案的路径，其中我错误地返回了false。正确访问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>```