autoresize.html 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  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. <script src="kitchen-sink/require.js"></script>
  29. <script>
  30. // setup paths
  31. require.config({paths: { "ace" : "../lib/ace"}});
  32. // load ace and extensions
  33. require(["ace/ace"], function(ace) {
  34. var editor1 = ace.edit("editor1");
  35. editor1.setTheme("ace/theme/tomorrow_night_eighties");
  36. editor1.session.setMode("ace/mode/html");
  37. editor1.setAutoScrollEditorIntoView(true);
  38. editor1.setOption("maxLines", 30);
  39. var editor2 = ace.edit("editor2");
  40. editor2.setTheme("ace/theme/tomorrow_night_blue");
  41. editor2.session.setMode("ace/mode/html");
  42. editor2.setAutoScrollEditorIntoView(true);
  43. editor2.setOption("maxLines", 30);
  44. editor2.setOption("minLines", 2);
  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. });
  57. </script>
  58. <script src="./show_own_source.js"></script>
  59. </body>
  60. </html>