richtextspellchecker.html 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  1. <!DOCTYPE html>
  2. <html>
  3. <!--
  4. Copyright 2010 The Closure Library Authors. All Rights Reserved.
  5. Use of this source code is governed by the Apache License, Version 2.0.
  6. See the COPYING file for details.
  7. -->
  8. <head>
  9. <title>goog.ui.RichTextSpellChecker</title>
  10. <meta charset="utf-8">
  11. <script src="../base.js"></script>
  12. <script>
  13. goog.require('goog.ui.RichTextSpellChecker');
  14. </script>
  15. <link rel="stylesheet" href="css/demo.css">
  16. <style>
  17. .goog-menu {
  18. position: absolute;
  19. color: #000;
  20. border: 1px solid #B5B6B5;
  21. background-color: #F3F3F7;
  22. cursor: default;
  23. font: normal small arial, helvetica, sans-serif;
  24. width: 25ex;
  25. outline: 0;
  26. }
  27. .goog-menuitem {
  28. padding: 2px 5px;
  29. position: relative;
  30. }
  31. .goog-menuitem-highlight {
  32. background-color: #4279A5;
  33. color: #FFF;
  34. }
  35. .goog-menuitem-disabled {
  36. background-color: #F3F3F7;
  37. color: #999;
  38. }
  39. .goog-menu hr {
  40. background-color: #999;
  41. height: 1px;
  42. border: 0px;
  43. margin: 0px;
  44. }
  45. </style>
  46. </head>
  47. <body>
  48. <h1>goog.ui.RichTextSpellChecker</h1>
  49. <p>
  50. The words "test", "words", "a", and "few" are set to be valid words, all others are considered spelling mistakes.
  51. </p>
  52. <p>
  53. If keyboard navigation is enabled, then the following shortcuts can be used
  54. inside the editor:
  55. <ul>
  56. <li>Previous misspelled word: ctrl + left-arrow</li>
  57. <li>next misspelled word: ctrl + right-arrow</li>
  58. <li>Open suggestions menu: down arrow</li>
  59. </ul>
  60. </p>
  61. <p>
  62. <iframe id="rich" style="width: 50ex; height: 15em;"></iframe>
  63. </p>
  64. <button onclick="s.check();">check</button>
  65. <button onclick="s.resume();">done</button>
  66. <script>
  67. function localSpellCheckingFunction(words, spellChecker, callback) {
  68. var len = words.length;
  69. var results = [];
  70. for (var i = 0; i < len; i++) {
  71. var word = words[i];
  72. if (word == 'test' || word == 'words' || word == 'a' || word == 'few') {
  73. results.push([word, goog.spell.SpellCheck.WordStatus.VALID]);
  74. } else {
  75. results.push([word, goog.spell.SpellCheck.WordStatus.INVALID,
  76. ['suggestion1', 'suggestion2']]);
  77. }
  78. }
  79. callback.call(spellChecker, results);
  80. }
  81. var handler = new goog.spell.SpellCheck(localSpellCheckingFunction);
  82. var s = new goog.ui.RichTextSpellChecker(handler);
  83. var el = document.getElementById('rich');
  84. var doc = el.contentDocument || el.contentWindow.document;
  85. doc.designMode = 'on';
  86. window.setTimeout(function() {
  87. s.decorate(el);
  88. }, 0);
  89. </script>
  90. </body>
  91. </html>