diff --git a/awx/ui/client/lib/angular-codemirror/lib/AngularCodeMirror.js b/awx/ui/client/lib/angular-codemirror/lib/AngularCodeMirror.js
index e4b9e5e02e..71ef0a674b 100644
--- a/awx/ui/client/lib/angular-codemirror/lib/AngularCodeMirror.js
+++ b/awx/ui/client/lib/angular-codemirror/lib/AngularCodeMirror.js
@@ -30,7 +30,7 @@
 angular.module('AngularCodeMirrorModule', [])
 
     .factory('AngularCodeMirror', [ function() {
-        return function() {
+        return function(readOnly) {
             var fn = function() {
 
                 this.myCodeMirror = null;
@@ -47,9 +47,9 @@ angular.module('AngularCodeMirrorModule', [])
                         height = 0;
 
                     self.element = $(element);
-                    
+
                     // We don't want to touch the original textarea. Angular likely has a model and other listeners
-                    // attached to it. In prior iterations attaching CodeMirror to it seemed to go bad, so we'll insert a 
+                    // attached to it. In prior iterations attaching CodeMirror to it seemed to go bad, so we'll insert a
                     // <div> under it, hide the textarea and let CodeMirror attach to the <div>.
                     if ($('#cm-' + model + '-container').length > 0) {
                         $('#cm-' + model + '-container').empty();
@@ -57,18 +57,25 @@ angular.module('AngularCodeMirrorModule', [])
                     else {
                         self.element.after("<div id=\"cm-" + model + "-container\"></div>");
                     }
-                    
+
                     // Calc the height of the text area- our CodeMirror should match.
                     height += self.element.attr('rows') * parseInt($(self.element).css('line-height').replace(/px/,''),10);
                     height += parseInt(self.element.css('padding-top').replace(/px|%/,''),10) +
                         parseInt(self.element.css('padding-bottom').replace(/px|%/,''),10);
                     height += 2;  //for the border
-                    
                     // hide
                     self.element.hide();
 
                     // Initialize CodeMirror
                     self.modes[mode].value = scope[model];
+
+                    // if readOnly is passed to AngularCodeMirror, set the
+                    // options for all modes to be readOnly
+                    if (readOnly) {
+                        Object.keys(self.modes).forEach(function(val) {
+                            self.modes[val].readOnly = true;
+                        });
+                    }
                     self.myCodeMirror = CodeMirror(document.getElementById('cm-' + model + '-container'), self.modes[mode]);
 
                     // Adjust the height
diff --git a/awx/ui/client/src/helpers/Parse.js b/awx/ui/client/src/helpers/Parse.js
index c484963162..a81f8c8194 100644
--- a/awx/ui/client/src/helpers/Parse.js
+++ b/awx/ui/client/src/helpers/Parse.js
@@ -25,7 +25,8 @@ export default
                     fld = (params.variable) ? params.variable : 'variables',
                     pfld = (params.parse_variable) ? params.parse_variable : 'parseType',
                     onReady = params.onReady,
-                    onChange = params.onChange;
+                    onChange = params.onChange,
+                    readOnly = params.readOnly;
 
                 function removeField(fld) {
                     //set our model to the last change in CodeMirror and then destroy CodeMirror
@@ -35,8 +36,7 @@ export default
 
                 function createField(onChange, onReady, fld) {
                     //hide the textarea and show a fresh CodeMirror with the current mode (json or yaml)
-
-                    scope[fld + 'codeMirror'] = AngularCodeMirror();
+                    scope[fld + 'codeMirror'] = AngularCodeMirror(readOnly);
                     scope[fld + 'codeMirror'].addModes($AnsibleConfig.variable_edit_modes);
                     scope[fld + 'codeMirror'].showTextArea({
                         scope: scope,
diff --git a/awx/ui/client/src/job-detail/job-detail.controller.js b/awx/ui/client/src/job-detail/job-detail.controller.js
index 02cb21a5f1..9181b21b20 100644
--- a/awx/ui/client/src/job-detail/job-detail.controller.js
+++ b/awx/ui/client/src/job-detail/job-detail.controller.js
@@ -641,7 +641,7 @@ export default
                                return true;
                            });
                         //scope.setSearchAll('host');
-                        ParseTypeChange({ scope: scope, field_id: 'pre-formatted-variables' });
+                        ParseTypeChange({ scope: scope, field_id: 'pre-formatted-variables', readOnly: true });
                         scope.$emit('LoadPlays', data.related.job_events);
                     })
                     .error(function(data, status) {