code-einbinden.php


Quell Code


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<style>
.editor {
  height: 100%;
  width: 80%;
  position: fixed;
  z-index: 0;
}
 
.editor .ace_editor {
  overflow: hidden;
  position:relative;
  height: 100%;
  width: 100%;
}
.editor .ace_editor .ace_scrollbar-v {
  display: none;
}

.dg.ac {
  position: fixed;
  z-index: 5;
}
.dg .c select {
  color: #000;
}
</style>
    <div class="editor"  ng-app="app"  ng-controller="ctrl" ng-class="{'split':editor.splitMode}">
      <div ng-style="{opacity:editor.opacity*.01}" ui-ace="{
      useWrapMode : editor.useWrapMode,
      showGutter: editor.gutter,
      theme:editor.theme,
      mode: editor.mode,
      onLoad: aceLoaded,
      onChange: aceChanged
    }" ng-model='value'></div>
    </div>

  </body>
<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://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js'></script>

</body>
<script>
  angular.module('app', ['ui.ace'])
.controller('ctrl', ['$scope', '$http', '$timeout', function($scope, $http, $timeout) {
  $scope.currentTheme = 14;
  $scope.value = '<html>333333333333';
  $http.get('https://rawgit.com/mrdoob/three.js/master/examples/webgl_lines_dashed.html').
  success(function(data, status, headers, config) {
    $scope.value = data;
  }).
  error(function(data, status, headers, config) {
   $scope.value = data;
   });
  $scope.aceLoaded = function (_editor) {
    _editor.setFontSize(14);
  }
  var editor = function() {
    this.theme = 'chaos';//themes[$scope.currentTheme];
    this.mode = 'html';
    this.opacity = 100;
    this.useWrapMode = true;
    this.gutter = true;
    this.splitMode = false;
    this.themeCycle = true;
  };
  $scope.editor = new editor();
}]);
  </script>