plaintextspellchecker.html 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2. "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <!--
  5. Copyright 2010 The Closure Library Authors. All Rights Reserved.
  6. Use of this source code is governed by the Apache License, Version 2.0.
  7. See the COPYING file for details.
  8. -->
  9. <head>
  10. <title>Plain Text Spell Checker</title>
  11. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  12. <script type="text/javascript" src="../base.js"></script>
  13. <script type="text/javascript">
  14. goog.require('goog.ui.PlainTextSpellChecker');
  15. </script>
  16. <style type="text/css">
  17. .goog-spellcheck-invalidword {
  18. background: yellow;
  19. }
  20. .goog-spellcheck-correctedword {
  21. background: green;
  22. }
  23. textarea, .goog-spellcheck-correctionpane {
  24. font: menu;
  25. font-size: 0.8em;
  26. border: 1px solid black;
  27. padding: 2px;
  28. margin: 0px;
  29. overflow: auto;
  30. line-height: 1.25em;
  31. }
  32. .goog-menu {
  33. position: absolute;
  34. color: #000;
  35. border: 1px solid #B5B6B5;
  36. background-color: #F3F3F7;
  37. cursor: default;
  38. font: normal small arial, helvetica, sans-serif;
  39. width: 25ex;
  40. outline: 0;
  41. }
  42. .goog-menuitem {
  43. padding: 2px 5px;
  44. position: relative;
  45. }
  46. .goog-menuitem-highlight {
  47. background-color: #4279A5;
  48. color: #FFF;
  49. }
  50. .goog-menuitem-disabled {
  51. background-color: #F3F3F7;
  52. color: #999;
  53. }
  54. .goog-menu hr {
  55. background-color: #999;
  56. height: 1px;
  57. border: 0px;
  58. margin: 0px;
  59. }
  60. </style>
  61. </head>
  62. <body>
  63. <h1>Plain Text Spell Checker</h1>
  64. <p>
  65. The words "test", "words", "a", and "few" are set to be valid words,
  66. all others are considered spelling mistakes.
  67. </p>
  68. <p>
  69. The following keyboard shortcuts can be used to navigate inside the editor:
  70. <ul>
  71. <li>Previous misspelled word: ctrl + left-arrow</li>
  72. <li>next misspelled word: ctrl + right-arrow</li>
  73. <li>Open suggestions menu: down arrow</li>
  74. </ul>
  75. </p>
  76. <p>
  77. <textarea id="t0" style="width: 50ex; height: 15em;"></textarea>
  78. </p>
  79. <button onclick="s.check();">check</button>
  80. <button onclick="s.resume();">resume</button>
  81. <script type="text/javascript">
  82. function localSpellCheckingFunction(words, spellChecker, callback) {
  83. var len = words.length;
  84. var results = [];
  85. for (var i = 0; i < len; i++) {
  86. var word = words[i];
  87. if (word == 'test' || word == 'words' || word == 'a' || word == 'few') {
  88. results.push([word, goog.spell.SpellCheck.WordStatus.VALID]);
  89. } else {
  90. results.push([word, goog.spell.SpellCheck.WordStatus.INVALID,
  91. ['foo', 'bar', 'test']]);
  92. }
  93. }
  94. callback.call(spellChecker, results);
  95. }
  96. var handler = new goog.spell.SpellCheck(localSpellCheckingFunction);
  97. var s = new goog.ui.PlainTextSpellChecker(handler);
  98. s.markCorrected = true;
  99. s.decorate(document.getElementById('t0'));
  100. </script>
  101. </body>
  102. </html>