You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

105 lines
3.4KB

  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. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
  7. <meta name="HandheldFriendly" content="True" />
  8. <title>Editor</title>
  9. <style type="text/css" media="screen">
  10. body {
  11. overflow: hidden;
  12. }
  13. #editor {
  14. margin: 0;
  15. position: absolute;
  16. top: 0;
  17. bottom: 0;
  18. left: 0;
  19. right: 0;
  20. }
  21. </style>
  22. </head>
  23. <body>
  24. <div class="wrapper">
  25. <div class="outer">
  26. <div class="row">
  27. <div class="col-sm-12 sp toolbar tab-pane" id="htmPane">
  28. <div class="toolbar">
  29. <button id="btnSave" class="btn btn-primary btn-xs">save</button>
  30. <button id="btnUndo" class="btn btn-primary btn-xs">undo</button>
  31. <button id="btnRedo" class="btn btn-primary btn-xs">redo</button>
  32. </div>
  33. <div class="pane-settings"><button class="btn btn-primary btn-xs"><i class="glyphicon glyphicon-cog"></i></button></div>
  34. <div class="pane-label">html</div>
  35. <div class="inner" id="editor"></div>
  36. </div>
  37. </div><!--/row-->
  38. </div><!--/outer-->
  39. </div><!--/wrapper-->
  40. <script src="src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
  41. <script>
  42. var buildDom = ace.require("ace/lib/dom").buildDom;
  43. var editor = ace.edit("editor");
  44. editor.setOptions({
  45. mode: "ace/mode/text",
  46. theme: "ace/theme/twilight",
  47. showPrintMargin: false,
  48. wrap: true,
  49. indentedSoftWrap: true,
  50. showFoldWidgets: false,
  51. showLineNumbers: true,
  52. showGutter: false,
  53. autoScrollEditorIntoView: false
  54. });
  55. var refs = {};
  56. function updateToolbar() {
  57. refs.undoButton.disabled = !editor.session.getUndoManager().hasUndo();
  58. refs.redoButton.disabled = !editor.session.getUndoManager().hasRedo();
  59. }
  60. editor.on("input", updateToolbar);
  61. if (localStorage.getItem("acetest") !== null) {
  62. editor.setValue(localStorage.getItem("acetest"));
  63. editor.clearSelection();
  64. }
  65. editor.getSession().on('change', function () {
  66. localStorage.setItem("acetest", editor.getSession().getValue());
  67. });
  68. function save() {
  69. alert("not yet implemented");
  70. }
  71. editor.commands.addCommand({
  72. name: "save",
  73. exec: save,
  74. bindKey: {
  75. win: "ctrl-s",
  76. mac: "cmd-s"
  77. }
  78. });
  79. $('#btnSave').click(function(){
  80. save();
  81. });
  82. $('#btnUndo').click(function(){
  83. editor.undo();
  84. });
  85. $('#btnRow').click(function(){
  86. editor.redo();
  87. });
  88. window.editor = editor;
  89. </script>
  90. </body>
  91. </html>