text area.html 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6. <title>Editor</title>
  7. <style type="text/css" media="screen">
  8. .ace_editor {
  9. border: 1px solid lightgray;
  10. margin: auto;
  11. height: 200px;
  12. width: 80%;
  13. }
  14. .scrollmargin {
  15. height: 80px;
  16. text-align: center;
  17. }
  18. </style>
  19. </head>
  20. <body>
  21. <h1>Filler</h1>
  22. <h1>Filler</h1>
  23. <h1>Filler</h1>
  24. <h1>Filler</h1>
  25. <h1>Filler</h1>
  26. <h1>Filler</h1>
  27. <h1>Filler</h1>
  28. <h1>Filler</h1>
  29. <h1>Filler</h1>
  30. <h1>Filler</h1>
  31. <h1>Filler</h1>
  32. <h1>Filler</h1>
  33. <h1>Filler</h1>
  34. <h1>Filler</h1>
  35. <h1>Filler</h1>
  36. <h1>Filler</h1>
  37. <h1>Filler</h1>
  38. <h1>Filler</h1>
  39. <textarea id="editor">function foo(items) {
  40. var x = "All this is syntax highlighted";
  41. return x;
  42. }</textarea>
  43. <button id="action">Click Me!</button>
  44. <!-- load ace -->
  45. <script src="../src/ace.js"></script>
  46. <script>
  47. var editor = ace.edit("editor");
  48. editor.setTheme("ace/theme/monokai");
  49. editor.session().setMode("ace/mode/javascript");
  50. window.editor = editor;
  51. document.getElementById("action").addEventListener('click',function () {
  52. editor.navigateTo(0,0);
  53. editor.getSelection().selectTo(0,5);
  54. editor.focus();
  55. return false;
  56. });
  57. </script>
  58. </body>
  59. </html>