Online editor for HTML, CSS and JS like REPL screen to test or doing code practice
Created
April 6, 2023 20:16
-
-
Save neisdev/413f9633ac030b4cbfc197c4ce603bcc to your computer and use it in GitHub Desktop.
Code Editor - Ace for HTML, CSS and JS
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
| <body ng-app="app" ng-controller="ctrl" ng-class="{'split':editor.splitMode}"> | |
| <!-- <p><button type="button" ng-click="compilecode(value)">Compile Code</button></p> --> | |
| <p><h3>Code Editor - Test Online Code for HTML, CSS and JS</h3></p> | |
| <!-- code editor --> | |
| <div class="editor"> | |
| <div id="editor" ui-ace="{ | |
| useWrapMode : editor.useWrapMode, | |
| showGutter: editor.gutter, | |
| theme:editor.theme, | |
| mode: editor.mode, | |
| onLoad: aceLoaded, | |
| onChange: aceChanged | |
| }" ng-model='value'></div> | |
| </div> | |
| <!-- output screen --> | |
| <div class="result"> | |
| <iframe srcdoc="{{html}}"></iframe> | |
| </div> | |
| </body> |
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
| angular.module('app', ['ui.ace']) | |
| .controller('ctrl', ['$scope', '$http', '$timeout','$sce', function($scope, $http, $timeout,$sce) { | |
| $scope.currentTheme = 14; | |
| $scope.aceLoaded = function (_editor) { | |
| _editor.setFontSize(14); | |
| } | |
| $scope.aceChanged = function (_editor) { | |
| } | |
| $scope.compilecode = (dt) =>{ | |
| $scope.html = $sce.trustAsHtml(dt); | |
| } | |
| $scope.$watch('value', function (html) { | |
| if (html) { | |
| $scope.html = $sce.trustAsHtml(html); | |
| } | |
| }); | |
| var editor = function() { | |
| this.theme = 'chaos' | |
| this.mode = 'html'; | |
| this.opacity = 65; | |
| this.useWrapMode = true; | |
| this.gutter = true; | |
| this.splitMode = false; | |
| this.themeCycle = true; | |
| }; | |
| $scope.editor = new 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
| <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script> | |
| <script src="https://ace.c9.io/build/src-min-noconflict/ace.js"></script> | |
| <script src="https://angular-ui.github.io/ui-ace/dist/ui-ace.min.js"></script> | |
| <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> |
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
| * | |
| transition: color 0.15s, background 0.15s | |
| body, html | |
| height: 100% | |
| overflow: hidden | |
| nav | |
| position: fixed | |
| background: black | |
| color: white | |
| height: 50px | |
| width: 100% | |
| .editor | |
| height: 100% | |
| width: 50% | |
| position: relative | |
| z-index: 0 | |
| float: left | |
| iframe | |
| position: fixed | |
| z-index: 0 | |
| width: 50% | |
| height: 100% | |
| border: none | |
| .ace_editor | |
| height: 100% | |
| width: 100% | |
| .result | |
| width: 50% | |
| height: 100% | |
| float: right | |
| background: white | |
| iframe | |
| width: 100% | |
| height: 100% | |
| .editor .ace_editor .ace_scrollbar-v | |
| display: none | |
| .split .editor | |
| iframe | |
| width: 50% | |
| right: 0 | |
| .ace_editor | |
| left: 0 | |
| width: 50% | |
| opacity: 1 !important | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment