angularjsiframeangular-uicodemirrorui-codemirror

Use 2 ui-codemirrors in 1 controller

I am coding a very very basic playground by using AngularJS and ui-codemirror. Here is the code (JSBin).

<html>
  <head>
    <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.0.5/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="myApp">
      <div ng-controller="codeCtrl">
        HTML:<br>
        <textarea ui-codemirror ng-model="html"></textarea>
        <br>CSS:<br>
        <textarea ui-codemirror ng-model="css"></textarea>
      </div>
      Output:
      <section id="output">
        <iframe></iframe>
      </section>
    </div>
  </body>
</html>

JavaScript:

var myApp = angular.module('myApp', ['ui']);

myApp.value('ui.config', {
  codemirror: {
    mode: 'text/x-php',
    lineNumbers: true,
    matchBrackets: true,
  }
});

function codeCtrl($scope, codeService) {
  $scope.html = '<body>default</body>';
  $scope.css = "body {color: red}";

  $scope.$watch('html', function () { codeService.render($scope.html, $scope.css); }, true);
  $scope.$watch('css', function () { codeService.render($scope.html, $scope.css); }, true);
}

myApp.service('codeService', 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();
  }
})

The above code works, but the problem is it applies one same ui.config to 2 ui-codemirror. Does anyone know how to apply mode html to the first ui-codemirror and mode css to the second ui-codemirror?

Additionally, how could I set the height (or rows) and width (or cols) of a ui-codemirror?

Solution

  • Controller: 

    function codeCtrl($scope, codeService) {

  $scope.editorOptions1 = {mode: 'text/html',
    lineNumbers: false,
    matchBrackets: true};

  $scope.editorOptions2 = {mode: 'text/css',
    lineNumbers: true,
    matchBrackets: true};

  $scope.html = '<body>default</body>';
  $scope.css = "body {color: red}";

  $scope.$watch('html', function () { codeService.render($scope.html, $scope.css); }, true);
  $scope.$watch('css', function () { codeService.render($scope.html, $scope.css); }, true);
}

    Html :

    <div ng-controller="codeCtrl">
        HTML:<br>
        <textarea ui-codemirror="editorOptions1" ng-model="html"></textarea>
        <br>CSS:<br>
        <textarea ui-codemirror="editorOptions2" ng-model="css"></textarea>
      </div>