autoresize.html 1.6 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. <pre id="editor1">autoresizing editor</pre>
  22. <div class="scrollmargin"></div>
  23. <pre id="editor2">minHeight = 2 lines</pre>
  24. <div class="scrollmargin"></div>
  25. <pre id="editor3" style="width: 40%;"></pre>
  26. <div class="scrollmargin"></div>
  27. <pre id="editor"></pre>
  28. <!-- load ace -->
  29. <script src="../src/ace.js"></script>
  30. <script>
  31. var editor1 = ace.edit("editor1", {
  32. theme: "ace/theme/tomorrow_night_eighties",
  33. mode: "ace/mode/html",
  34. maxLines: 30,
  35. wrap: true,
  36. autoScrollEditorIntoView: true
  37. });
  38. var editor2 = ace.edit("editor2", {
  39. theme: "ace/theme/tomorrow_night_blue",
  40. mode: "ace/mode/html",
  41. autoScrollEditorIntoView: true,
  42. maxLines: 30,
  43. minLines: 2
  44. });
  45. var editor = ace.edit("editor3");
  46. editor.setOptions({
  47. autoScrollEditorIntoView: true,
  48. maxLines: 8
  49. });
  50. editor.renderer.setScrollMargin(10, 10, 10, 10);
  51. var editor = ace.edit("editor");
  52. editor.setTheme("ace/theme/tomorrow");
  53. editor.session.setMode("ace/mode/html");
  54. editor.setAutoScrollEditorIntoView(true);
  55. editor.setOption("maxLines", 100);
  56. </script>
  57. <script src="./show_own_source.js"></script>
  58. </body>
  59. </html>