diff --git a/app/docker/views/configs/create/createConfigController.js b/app/docker/views/configs/create/createConfigController.js
index 19a698b0b..07868dd3c 100644
--- a/app/docker/views/configs/create/createConfigController.js
+++ b/app/docker/views/configs/create/createConfigController.js
@@ -1,11 +1,12 @@
 angular.module('portainer.docker')
-.controller('CreateConfigController', ['$scope', '$state', '$document', 'Notifications', 'ConfigService', 'Authentication', 'FormValidator', 'ResourceControlService', 'CodeMirrorService',
-function ($scope, $state, $document, Notifications, ConfigService, Authentication, FormValidator, ResourceControlService, CodeMirrorService) {
+.controller('CreateConfigController', ['$scope', '$state', 'Notifications', 'ConfigService', 'Authentication', 'FormValidator', 'ResourceControlService',
+function ($scope, $state, Notifications, ConfigService, Authentication, FormValidator, ResourceControlService) {
 
   $scope.formValues = {
     Name: '',
     Labels: [],
-    AccessControlData: new AccessControlFormData()
+    AccessControlData: new AccessControlFormData(),
+    ConfigContent: ''
   };
 
   $scope.state = {
@@ -31,9 +32,7 @@ function ($scope, $state, $document, Notifications, ConfigService, Authenticatio
   }
 
   function prepareConfigData(config) {
-    // The codemirror editor does not work with ng-model so we need to retrieve
-    // the value directly from the editor.
-    var configData = $scope.editor.getValue();
+    var configData = $scope.formValues.ConfigContent;
     config.Data = btoa(unescape(encodeURIComponent(configData)));
   }
 
@@ -62,6 +61,11 @@ function ($scope, $state, $document, Notifications, ConfigService, Authenticatio
     var userDetails = Authentication.getUserDetails();
     var isAdmin = userDetails.role === 1;
 
+    if ($scope.formValues.ConfigContent === '') {
+      $scope.state.formValidationError = 'Config content must not be empty';
+      return;
+    }
+
     if (!validateForm(accessControlData, isAdmin)) {
       return;
     }
@@ -83,14 +87,7 @@ function ($scope, $state, $document, Notifications, ConfigService, Authenticatio
     });
   };
 
-  function initView() {
-    $document.ready(function() {
-      var webEditorElement = $document[0].getElementById('config-editor', false);
-      if (webEditorElement) {
-        $scope.editor = CodeMirrorService.applyCodeMirrorOnElement(webEditorElement, false, false);
-      }
-    });
-  }
-
-  initView();
+  $scope.editorUpdate = function(cm) {
+    $scope.formValues.ConfigContent = cm.getValue();
+  };
 }]);
diff --git a/app/docker/views/configs/create/createconfig.html b/app/docker/views/configs/create/createconfig.html
index 0f7972ad0..d55343dcb 100644
--- a/app/docker/views/configs/create/createconfig.html
+++ b/app/docker/views/configs/create/createconfig.html
@@ -21,7 +21,12 @@
           <!-- config-data -->
           <div class="form-group">
             <div class="col-sm-12">
-              <textarea id="config-editor" class="form-control"></textarea>
+              <code-editor
+                identifier="config-creation-editor"
+                placeholder="Define or paste the content of your config here"
+                yml="false"
+                on-change="editorUpdate"
+              ></code-editor>
             </div>
           </div>
           <!-- !config-data -->
@@ -62,6 +67,7 @@
           <div class="form-group">
             <div class="col-sm-12">
               <button type="button" class="btn btn-primary btn-sm" ng-disabled="!formValues.Name" ng-click="create()">Create config</button>
+              <span class="text-danger" ng-if="state.formValidationError" style="margin-left: 5px;">{{ state.formValidationError }}</span>
             </div>
           </div>
           <!-- !actions -->
diff --git a/app/docker/views/configs/edit/config.html b/app/docker/views/configs/edit/config.html
index 2b84b6d54..32475db4f 100644
--- a/app/docker/views/configs/edit/config.html
+++ b/app/docker/views/configs/edit/config.html
@@ -70,7 +70,12 @@
         <form class="form-horizontal">
           <div class="form-group">
             <div class="col-sm-12">
-              <textarea id="config-editor" ng-model="config.Data" class="form-control"></textarea>
+              <code-editor
+                identifier="config-editor"
+                yml="false"
+                read-only="true"
+                value="config.Data"
+              ></code-editor>
             </div>
           </div>
         </form>
diff --git a/app/docker/views/configs/edit/configController.js b/app/docker/views/configs/edit/configController.js
index 72c1ea86b..3e0ad0178 100644
--- a/app/docker/views/configs/edit/configController.js
+++ b/app/docker/views/configs/edit/configController.js
@@ -1,6 +1,6 @@
 angular.module('portainer.docker')
-.controller('ConfigController', ['$scope', '$transition$', '$state',  '$document', 'ConfigService', 'Notifications', 'CodeMirrorService',
-function ($scope, $transition$, $state, $document, ConfigService, Notifications, CodeMirrorService) {
+.controller('ConfigController', ['$scope', '$transition$', '$state', 'ConfigService', 'Notifications',
+function ($scope, $transition$, $state, ConfigService, Notifications) {
 
   $scope.removeConfig = function removeConfig(configId) {
     ConfigService.remove(configId)
@@ -13,20 +13,10 @@ function ($scope, $transition$, $state, $document, ConfigService, Notifications,
     });
   };
 
-  function initEditor() {
-    $document.ready(function() {
-      var webEditorElement = $document[0].getElementById('config-editor');
-      if (webEditorElement) {
-        $scope.editor = CodeMirrorService.applyCodeMirrorOnElement(webEditorElement, false, true);
-      }
-    });
-  }
-
   function initView() {
     ConfigService.config($transition$.params().id)
     .then(function success(data) {
       $scope.config = data;
-      initEditor();
     })
     .catch(function error(err) {
       Notifications.error('Failure', err, 'Unable to retrieve config details');
diff --git a/app/docker/views/stacks/create/createStackController.js b/app/docker/views/stacks/create/createStackController.js
index f569dc9e3..cc11a680b 100644
--- a/app/docker/views/stacks/create/createStackController.js
+++ b/app/docker/views/stacks/create/createStackController.js
@@ -1,14 +1,10 @@
 angular.module('portainer.docker')
-.controller('CreateStackController', ['$scope', '$state', '$document', 'StackService', 'CodeMirrorService', 'Authentication', 'Notifications', 'FormValidator', 'ResourceControlService', 'FormHelper',
-function ($scope, $state, $document, StackService, CodeMirrorService, Authentication, Notifications, FormValidator, ResourceControlService, FormHelper) {
-
-  // Store the editor content when switching builder methods
-  var editorContent = '';
-  var editorEnabled = true;
+.controller('CreateStackController', ['$scope', '$state', 'StackService', 'Authentication', 'Notifications', 'FormValidator', 'ResourceControlService', 'FormHelper',
+function ($scope, $state, StackService, Authentication, Notifications, FormValidator, ResourceControlService, FormHelper) {
 
   $scope.formValues = {
     Name: '',
-    StackFileContent: '# Define or paste the content of your docker-compose file here',
+    StackFileContent: '',
     StackFile: null,
     RepositoryURL: '',
     Env: [],
@@ -42,15 +38,11 @@ function ($scope, $state, $document, StackService, CodeMirrorService, Authentica
     return true;
   }
 
-  function createStack(name) {
-    var method = $scope.state.Method;
+  function createStack(name, method) {
     var env = FormHelper.removeInvalidEnvVars($scope.formValues.Env);
 
     if (method === 'editor') {
-      // The codemirror editor does not work with ng-model so we need to retrieve
-      // the value directly from the editor.
-      var stackFileContent = $scope.editor.getValue();
-
+      var stackFileContent = $scope.formValues.StackFileContent;
       return StackService.createStackFromFileContent(name, stackFileContent, env);
     } else if (method === 'upload') {
       var stackFile = $scope.formValues.StackFile;
@@ -64,18 +56,24 @@ function ($scope, $state, $document, StackService, CodeMirrorService, Authentica
 
   $scope.deployStack = function () {
     var name = $scope.formValues.Name;
+    var method = $scope.state.Method;
 
     var accessControlData = $scope.formValues.AccessControlData;
     var userDetails = Authentication.getUserDetails();
     var isAdmin = userDetails.role === 1;
     var userId = userDetails.ID;
 
+    if (method === 'editor' && $scope.formValues.StackFileContent === '') {
+      $scope.state.formValidationError = 'Stack file content must not be empty';
+      return;
+    }
+
     if (!validateForm(accessControlData, isAdmin)) {
       return;
     }
 
     $scope.state.actionInProgress = true;
-    createStack(name)
+    createStack(name, method)
     .then(function success(data) {
       Notifications.success('Stack successfully deployed');
     })
@@ -96,33 +94,7 @@ function ($scope, $state, $document, StackService, CodeMirrorService, Authentica
     });
   };
 
-  function enableEditor(value) {
-    $document.ready(function() {
-      var webEditorElement = $document[0].getElementById('web-editor');
-      if (webEditorElement) {
-        $scope.editor = CodeMirrorService.applyCodeMirrorOnElement(webEditorElement, true, false);
-        if (value) {
-          $scope.editor.setValue(value);
-        }
-      }
-    });
-  }
-
-  $scope.toggleEditor = function() {
-    if (!editorEnabled) {
-      enableEditor(editorContent);
-      editorEnabled = true;
-    }
+  $scope.editorUpdate = function(cm) {
+    $scope.formValues.StackFileContent = cm.getValue();
   };
-
-  $scope.saveEditorContent = function() {
-    editorContent = $scope.editor.getValue();
-    editorEnabled = false;
-  };
-
-  function initView() {
-    enableEditor();
-  }
-
-  initView();
 }]);
diff --git a/app/docker/views/stacks/create/createstack.html b/app/docker/views/stacks/create/createstack.html
index af80be3e2..927255b23 100644
--- a/app/docker/views/stacks/create/createstack.html
+++ b/app/docker/views/stacks/create/createstack.html
@@ -31,7 +31,7 @@
           <div class="form-group" style="margin-bottom: 0">
             <div class="boxselector_wrapper">
               <div>
-                <input type="radio" id="method_editor" ng-model="state.Method" value="editor" ng-click="toggleEditor(state.Method)">
+                <input type="radio" id="method_editor" ng-model="state.Method" value="editor">
                 <label for="method_editor">
                   <div class="boxselector_header">
                     <i class="fa fa-edit" aria-hidden="true" style="margin-right: 2px;"></i>
@@ -41,7 +41,7 @@
                 </label>
               </div>
               <div>
-                <input type="radio" id="method_upload" ng-model="state.Method" value="upload" ng-click="saveEditorContent()">
+                <input type="radio" id="method_upload" ng-model="state.Method" value="upload">
                 <label for="method_upload">
                   <div class="boxselector_header">
                     <i class="fa fa-upload" aria-hidden="true" style="margin-right: 2px;"></i>
@@ -51,7 +51,7 @@
                 </label>
               </div>
               <div>
-                <input type="radio" id="method_repository" ng-model="state.Method" value="repository" ng-click="saveEditorContent()">
+                <input type="radio" id="method_repository" ng-model="state.Method" value="repository">
                 <label for="method_repository">
                   <div class="boxselector_header">
                     <i class="fa fa-git" aria-hidden="true" style="margin-right: 2px;"></i>
@@ -64,7 +64,7 @@
           </div>
           <!-- !build-method -->
           <!-- web-editor -->
-          <div ng-if="state.Method === 'editor'">
+          <div ng-show="state.Method === 'editor'">
             <div class="col-sm-12 form-section-title">
               Web editor
             </div>
@@ -75,13 +75,18 @@
             </div>
             <div class="form-group">
               <div class="col-sm-12">
-                <textarea id="web-editor" class="form-control" ng-model="formValues.StackFileContent" placeholder='version: "3"'></textarea>
+                <code-editor
+                  identifier="stack-creation-editor"
+                  placeholder="# Define or paste the content of your docker-compose file here"
+                  yml="true"
+                  on-change="editorUpdate"
+                ></code-editor>
               </div>
             </div>
           </div>
           <!-- !web-editor -->
           <!-- upload -->
-          <div ng-if="state.Method === 'upload'">
+          <div ng-show="state.Method === 'upload'">
             <div class="col-sm-12 form-section-title">
               Upload
             </div>
@@ -102,7 +107,7 @@
           </div>
           <!-- !upload -->
           <!-- repository -->
-          <div ng-if="state.Method === 'repository'">
+          <div ng-show="state.Method === 'repository'">
             <div class="col-sm-12 form-section-title">
               Git repository
             </div>
@@ -167,7 +172,7 @@
           </div>
           <div class="form-group">
             <div class="col-sm-12">
-              <button type="button" class="btn btn-primary btn-sm" ng-disabled="state.actionInProgress || (state.Method === 'editor' && !formValues.StackFileContent)
+              <button type="button" class="btn btn-primary btn-sm" ng-disabled="state.actionInProgress
               || (state.Method === 'upload' && !formValues.StackFile)
               || (state.Method === 'repository' && (!formValues.RepositoryURL || !formValues.RepositoryPath))
               || !formValues.Name" ng-click="deployStack()" button-spinner="state.actionInProgress">
diff --git a/app/docker/views/stacks/edit/stack.html b/app/docker/views/stacks/edit/stack.html
index 512709802..62aa21b32 100644
--- a/app/docker/views/stacks/edit/stack.html
+++ b/app/docker/views/stacks/edit/stack.html
@@ -57,7 +57,13 @@
           </div>
           <div class="form-group">
             <div class="col-sm-12">
-              <textarea id="web-editor" class="form-control" ng-model="stackFileContent" placeholder='version: "3"'></textarea>
+              <code-editor
+                identifier="stack-editor"
+                placeholder="# Define or paste the content of your docker-compose file here"
+                yml="true"
+                on-change="editorUpdate"
+                value="stackFileContent"
+              ></code-editor>
             </div>
           </div>
           <div class="col-sm-12 form-section-title">
diff --git a/app/docker/views/stacks/edit/stackController.js b/app/docker/views/stacks/edit/stackController.js
index a3e8a0915..04bbe0c36 100644
--- a/app/docker/views/stacks/edit/stackController.js
+++ b/app/docker/views/stacks/edit/stackController.js
@@ -1,6 +1,6 @@
 angular.module('portainer.docker')
-.controller('StackController', ['$q', '$scope', '$state', '$transition$', '$document', 'StackService', 'NodeService', 'ServiceService', 'TaskService', 'ServiceHelper', 'CodeMirrorService', 'Notifications', 'FormHelper', 'EndpointProvider',
-function ($q, $scope, $state, $transition$, $document, StackService, NodeService, ServiceService, TaskService, ServiceHelper, CodeMirrorService, Notifications, FormHelper, EndpointProvider) {
+.controller('StackController', ['$q', '$scope', '$state', '$transition$', 'StackService', 'NodeService', 'ServiceService', 'TaskService', 'ServiceHelper', 'Notifications', 'FormHelper', 'EndpointProvider',
+function ($q, $scope, $state, $transition$, StackService, NodeService, ServiceService, TaskService, ServiceHelper, Notifications, FormHelper, EndpointProvider) {
 
   $scope.state = {
     actionInProgress: false,
@@ -12,9 +12,7 @@ function ($q, $scope, $state, $transition$, $document, StackService, NodeService
   };
 
   $scope.deployStack = function () {
-    // The codemirror editor does not work with ng-model so we need to retrieve
-    // the value directly from the editor.
-    var stackFile = $scope.editor.getValue();
+    var stackFile = $scope.stackFileContent;
     var env = FormHelper.removeInvalidEnvVars($scope.stack.Env);
     var prune = $scope.formValues.Prune;
 
@@ -63,13 +61,6 @@ function ($q, $scope, $state, $transition$, $document, StackService, NodeService
     .then(function success(data) {
       $scope.stackFileContent = data.stackFile;
 
-      $document.ready(function() {
-        var webEditorElement = $document[0].getElementById('web-editor');
-        if (webEditorElement) {
-          $scope.editor = CodeMirrorService.applyCodeMirrorOnElement(webEditorElement, true, false);
-        }
-      });
-
       $scope.nodes = data.nodes;
 
       var services = data.services;
@@ -89,5 +80,9 @@ function ($q, $scope, $state, $transition$, $document, StackService, NodeService
     });
   }
 
+  $scope.editorUpdate = function(cm) {
+    $scope.stackFileContent = cm.getValue();
+  };
+
   initView();
 }]);
diff --git a/app/portainer/components/code-editor/code-editor.js b/app/portainer/components/code-editor/code-editor.js
new file mode 100644
index 000000000..97d7d583b
--- /dev/null
+++ b/app/portainer/components/code-editor/code-editor.js
@@ -0,0 +1,12 @@
+angular.module('portainer.app').component('codeEditor', {
+  templateUrl: 'app/portainer/components/code-editor/codeEditor.html',
+  controller: 'CodeEditorController',
+  bindings: {
+    identifier: '@',
+    placeholder: '@',
+    yml: '<',
+    readOnly: '<',
+    onChange: '<',
+    value: '<'
+  }
+});
diff --git a/app/portainer/components/code-editor/codeEditor.html b/app/portainer/components/code-editor/codeEditor.html
new file mode 100644
index 000000000..54d2a0bbf
--- /dev/null
+++ b/app/portainer/components/code-editor/codeEditor.html
@@ -0,0 +1 @@
+<textarea id="{{ $ctrl.identifier }}" class="form-control" placeholder="{{ $ctrl.placeholder }}"></textarea>
diff --git a/app/portainer/components/code-editor/codeEditorController.js b/app/portainer/components/code-editor/codeEditorController.js
new file mode 100644
index 000000000..bbd5179bc
--- /dev/null
+++ b/app/portainer/components/code-editor/codeEditorController.js
@@ -0,0 +1,20 @@
+angular.module('portainer.app')
+.controller('CodeEditorController', ['$document', 'CodeMirrorService',
+function ($document, CodeMirrorService) {
+  var ctrl = this;
+
+  this.$onInit = function() {
+    $document.ready(function() {
+      var editorElement = $document[0].getElementById(ctrl.identifier);
+      if (editorElement) {
+        ctrl.editor = CodeMirrorService.applyCodeMirrorOnElement(editorElement, ctrl.yml, ctrl.readOnly);
+        if (ctrl.onChange) {
+          ctrl.editor.on('change', ctrl.onChange);
+        }
+        if (ctrl.value) {
+          ctrl.editor.setValue(ctrl.value);
+        }
+      }
+    });
+  };
+}]);
diff --git a/app/portainer/services/stateManager.js b/app/portainer/services/stateManager.js
index 6780b5c62..3b9d843dd 100644
--- a/app/portainer/services/stateManager.js
+++ b/app/portainer/services/stateManager.js
@@ -110,7 +110,6 @@ function StateManagerFactory($q, SystemService, InfoHelper, LocalStorage, Settin
 
 
   function assignExtensions(endpointExtensions) {
-    console.log(JSON.stringify(endpointExtensions, null, 4));
     var extensions = [];
 
     for (var i = 0; i < endpointExtensions.length; i++) {
diff --git a/vendor.yml b/vendor.yml
index 0e0926014..acccc633d 100644
--- a/vendor.yml
+++ b/vendor.yml
@@ -17,6 +17,7 @@ js:
   - node_modules/codemirror/mode/yaml/yaml.js
   - node_modules/codemirror/addon/lint/lint.js
   - node_modules/codemirror/addon/lint/yaml-lint.js
+  - node_modules/codemirror/addon/display/placeholder.js
   minified:
   - node_modules/jquery/dist/jquery.min.js
   - node_modules/bootstrap/dist/js/bootstrap.min.js
@@ -34,6 +35,7 @@ js:
   - node_modules/codemirror/mode/yaml/yaml.js
   - node_modules/codemirror/addon/lint/lint.js
   - node_modules/codemirror/addon/lint/yaml-lint.js
+  - node_modules/codemirror/addon/display/placeholder.js
 css:
   regular:
   - node_modules/bootstrap/dist/css/bootstrap.css