Created
February 1, 2023 22:33
-
-
Save lewdev/9ca2afc1d56d1cb1f7d7a3f7c0458ab7 to your computer and use it in GitHub Desktop.
👨💻 ACE Cloud9 Code Editor
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <title>ACE in Action</title> | |
| <style type="text/css" media="screen"> | |
| /* | |
| #editor { | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| bottom: 0; | |
| left: 0; | |
| } */ | |
| body { | |
| margin: 0; | |
| overflow: hidden; | |
| } | |
| /* * {scrollbar-width: thin;} */ | |
| a { text-decoration: none; } | |
| iframe, #editor { | |
| box-sizing: border-box; | |
| margin: 0; | |
| border: 0; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| /* horizontal layout styling */ | |
| body.horiz > .col { | |
| width: 100%; | |
| height: 50%; | |
| position: absolute; | |
| } | |
| body.horiz > .col-l { | |
| top: 0;/*30px;*/ | |
| left: 0; | |
| right: 100%; | |
| height: calc(50% - 15px); | |
| } | |
| body.horiz > .col-r { | |
| top: calc(50% + 15px); | |
| left: 0; | |
| right: 100%; | |
| } | |
| /* vertical layout styling */ | |
| .col { width: 50%; position: absolute; | |
| top: 0;/*30px;*/ | |
| bottom: 0; | |
| } | |
| .col-l { left: 0; right: 50%; } | |
| .col-r { left: 50%; right: 100%; } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="col col-l"> | |
| <div id="editor">function foo(items) { | |
| var x = "All this is syntax highlighted"; | |
| return x; | |
| }</div> | |
| </div> | |
| <div class="col col-r"> | |
| <iframe id=f sandbox="allow-forms allow-popups allow-scripts allow-same-origin allow-modals"></iframe> | |
| </div> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.15.0/ace.min.js" integrity="sha512-e1Y1L6lY7YKDe+zseybZUG8MYUMLA1jxMQAPJqRYiA4L8NPaXfW+h52QQTLurHW4w3b21LxH/u1sZYMBtoB70w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.15.0/mode-html.min.js" integrity="sha512-FkjjcAxMVLHuYfjgMWzK913LT/ORbOSNfn8kgnx25Jt+Lv07w2huaNe01tbUFrVeXPEIrilbY+6MPBsTUxP8cQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.15.0/keybinding-vscode.min.js" integrity="sha512-zwaLKZ7pn/OSDw/4WhipUQKnzci85iXmAygibtaFgxZ8jRkj3k6DkWzuP+JTQkOzT/vFaYGt9pFLF8lw8yCCWA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.15.0/theme-cloud9_night.min.js" integrity="sha512-BmYPAwQf0/0EPG9lt9uPOoRZpWlLU8wdETWC+P1AltGMOEyOmhy+1hXZ8NbPIYFL6CyMhHyGV6AcMnc3rcJb8w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> | |
| <script> | |
| var editor = ace.edit("editor"); | |
| editor.setTheme("ace/theme/cloud9_night"); | |
| editor.session.setMode("ace/mode/html"); | |
| editor.session.setTabSize(2); | |
| editor.setShowPrintMargin(false); | |
| editor.session.setUseWrapMode(true); | |
| // editor.session.setUseSoftTabs(true); | |
| const runCode = editor => { | |
| const content = editor.getValue().replace(/\t/g, " "); | |
| editor.setValue(content); | |
| //save content before running | |
| // userConfig.content = content; | |
| // localStorage.setItem(USER_CONFIG_REF, JSON.stringify(userConfig)); | |
| //run code in iframe | |
| f.srcdoc = content; | |
| }; | |
| editor.commands.addCommand({ | |
| name: 'myCommand', | |
| bindKey: {win: 'Ctrl-Enter', mac: 'Command-Enter'}, | |
| exec: runCode, | |
| readOnly: true, // false if this command should not apply in readOnly mode | |
| // multiSelectAction: "forEach", optional way to control behavior with multiple cursors | |
| // scrollIntoView: "cursor", control how cursor is scolled into view after the command | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment