Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.css">
  <link rel="stylesheet" href="https://codemirror.net/lib/codemirror.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
  <script src="https://codemirror.net/lib/codemirror.js"></script>
  <script src="https://codemirror.net/addon/edit/matchbrackets.js"></script>
  <script src="https://codemirror.net/mode/htmlmixed/htmlmixed.js"></script>
  <script src="https://codemirror.net/mode/xml/xml.js"></script>
  <script src="https://codemirror.net/mode/javascript/javascript.js"></script>
  <script src="https://codemirror.net/mode/css/css.js"></script>
  <script src="https://codemirror.net/mode/clike/clike.js"></script>
  <script src="https://codemirror.net/mode/php/php.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.js"></script>
</head>
<body>
  <div ng-app="codeMirrorApp">
    <div ng-controller="MirrorsController as ctrl">
      HTML:<br>
      <html-code-mirror handler="ctrl.handleHtml(content)"></html-code-mirror>
      <br>CSS:<br>
      <css-code-mirror handler="ctrl.handleCss(content)"></css-code-mirror>
    </div>
    Output:
    <section id="output">
      <iframe></iframe>
    </section>
  </div>
</body>
</html>
 
angular.module('codeMirrorApp', ['ui']);
​
angular.module('codeMirrorApp')
  .factory('CodeMirrorFactory', ['$parse',
    function($parse) {
      return {
        createDirective: function(config) {
          var configString = JSON.stringify(config);
          return {
            scope: true,
            restrict: 'E',
            template: '<textarea ui-codemirror=' + configString + ' ng-model="content"></textarea>',
            controller: ['$scope', '$attrs', function($scope, $attrs) {
              var handler = $parse($attrs.handler);
​
              $scope.$watch('content', function(value) {
                handler($scope, { content: value });
              });
            }]
          };
        }
      };
    }
  ]);
​
angular.module('codeMirrorApp')
  .controller('MirrorsController', ['RenderMirrors',
    function(RenderMirrors) {
      var ctrl = this,
          html,
          css;
      
      ctrl.handleHtml = function(htmlString) {
        html = htmlString;
        RenderMirrors.render(html, css);
      };
      
      ctrl.handleCss = function(cssString) {
        css = cssString;
        RenderMirrors.render(html, css);
      };
    }
  ]);
​
angular.module('codeMirrorApp')
  .directive('cssCodeMirror', ['CodeMirrorFactory',
    function(CodeMirrorFactory) {
      var config = {
          mode: 'text/css',
          lineNumbers: true,
          matchBrackets: true
      };
      
      return CodeMirrorFactory.createDirective(config);
    }
  ]);
​
​
angular.module('codeMirrorApp')
  .directive('htmlCodeMirror', ['CodeMirrorFactory',
    function(CodeMirrorFactory) {
      var config = {
          mode: 'text/html',
          lineNumbers: true,
          matchBrackets: true
      };
      
      return CodeMirrorFactory.createDirective(config);
    }
  ]);
​
angular.module('codeMirrorApp')
  .service('RenderMirrors', [
    function() {
      this.render = function(html, css) {
        source = "<html><head><style>" + css + "</style></head>" + html +"</html>";
    
        var iframe = document.querySelector('#output iframe'),
            iframe_doc = iframe.contentDocument;
     
        iframe_doc.open();
        iframe_doc.write(source);
        iframe_doc.close();
      }
    }
  ]);
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers