diff --git a/login-base/src/main/resources/templates/login/form/save.html b/login-base/src/main/resources/templates/login/form/save.html
index 84cd1e41..6f93753f 100644
--- a/login-base/src/main/resources/templates/login/form/save.html
+++ b/login-base/src/main/resources/templates/login/form/save.html
@@ -366,6 +366,23 @@
         var form = layui.form;
         var laytpl = layui.laytpl;
         var viewerObj = {};
+        var codeMirrorConfig = {
+            lineNumbers: true,
+            theme: 'dracula',
+            matchBrackets: true,
+            indentUnit : 4,
+            tabSize : 4,
+            extraKeys: {
+                'Shift-Tab': function (cm) {
+                    if (cm.somethingSelected()) {
+                        cm.indentSelection('subtract');
+                    } else {
+                        cm.indentLine(cm.getCursor().line, "subtract");
+                    }
+                    return;
+                },
+            }
+        };
 
         function closeBox() {
             parent.layer.close(parent.layer.getFrameIndex(window.name));
@@ -511,54 +528,39 @@
         }
 
         function initFormHtml() {
-            var editor = CodeMirror.fromTextArea(document.getElementById('formHtml'), {
-                lineNumbers: true,
-                theme: 'dracula'
-            });
+            var editor = CodeMirror.fromTextArea(document.getElementById('formHtml'), codeMirrorConfig);
             editor.on('change', function(self, changeValue) {
                 $('#formHtml').val(self.getValue());
             })
         }
 
         function initFormCss() {
-            var editor = CodeMirror.fromTextArea(document.getElementById('formCss'), {
-                lineNumbers: true,
-                mode: 'css',
-                theme: 'dracula',
-            });
+            codeMirrorConfig.mode = 'css';
+            var editor = CodeMirror.fromTextArea(document.getElementById('formCss'), codeMirrorConfig);
             editor.on('change', function(self, changeValue) {
                 $('#formCss').val(self.getValue());
             })
         }
 
         function initFormLeftCss() {
-            var editor = CodeMirror.fromTextArea(document.getElementById('formLeftCss'), {
-                lineNumbers: true,
-                mode: 'css',
-                theme: 'dracula'
-            });
+            codeMirrorConfig.mode = 'css';
+            var editor = CodeMirror.fromTextArea(document.getElementById('formLeftCss'), codeMirrorConfig);
             editor.on('change', function(self, changeValue) {
                 $('#formLeftCss').val(self.getValue());
             })
         }
 
         function initFormCenterCss() {
-            var editor = CodeMirror.fromTextArea(document.getElementById('formCenterCss'), {
-                lineNumbers: true,
-                mode: 'css',
-                theme: 'dracula'
-            });
+            codeMirrorConfig.mode = 'css';
+            var editor = CodeMirror.fromTextArea(document.getElementById('formCenterCss'), codeMirrorConfig);
             editor.on('change', function(self, changeValue) {
                 $('#formCenterCss').val(self.getValue());
             })
         }
 
         function initFormRightCss() {
-            var editor = CodeMirror.fromTextArea(document.getElementById('formRightCss'), {
-                lineNumbers: true,
-                mode: 'css',
-                theme: 'dracula'
-            });
+            codeMirrorConfig.mode = 'css';
+            var editor = CodeMirror.fromTextArea(document.getElementById('formRightCss'), codeMirrorConfig);
             editor.on('change', function(self, changeValue) {
                 $('#formRightCss').val(self.getValue());
             })
diff --git a/login-base/src/main/resources/templates/login/form/update.html b/login-base/src/main/resources/templates/login/form/update.html
index 12f7712f..4aec0938 100644
--- a/login-base/src/main/resources/templates/login/form/update.html
+++ b/login-base/src/main/resources/templates/login/form/update.html
@@ -368,6 +368,23 @@
         var laytpl = layui.laytpl;
         var loginFormId = top.restAjax.params(window.location.href).loginFormId;
         var viewerObj = {};
+        var codeMirrorConfig = {
+            lineNumbers: true,
+            theme: 'dracula',
+            matchBrackets: true,
+            indentUnit : 4,
+            tabSize : 4,
+            extraKeys: {
+                'Shift-Tab': function (cm) {
+                    if (cm.somethingSelected()) {
+                        cm.indentSelection('subtract');
+                    } else {
+                        cm.indentLine(cm.getCursor().line, "subtract");
+                    }
+                    return;
+                },
+            }
+        };
 
         function closeBox() {
             parent.layer.close(parent.layer.getFrameIndex(window.name));
@@ -513,10 +530,7 @@
         }
 
         function initFormHtml(value) {
-            var editor = CodeMirror.fromTextArea(document.getElementById('formHtml'), {
-                lineNumbers: true,
-                theme: 'dracula'
-            });
+            var editor = CodeMirror.fromTextArea(document.getElementById('formHtml'), codeMirrorConfig);
             editor.setValue(value);
             editor.on('change', function(self, changeValue) {
                 $('#formHtml').val(self.getValue());
@@ -524,11 +538,8 @@
         }
 
         function initFormCss(value) {
-            var editor = CodeMirror.fromTextArea(document.getElementById('formCss'), {
-                lineNumbers: true,
-                mode: 'css',
-                theme: 'dracula',
-            });
+            codeMirrorConfig.mode = 'css';
+            var editor = CodeMirror.fromTextArea(document.getElementById('formCss'), codeMirrorConfig);
             editor.setValue(value);
             editor.on('change', function(self, changeValue) {
                 $('#formCss').val(self.getValue());
@@ -536,11 +547,8 @@
         }
 
         function initFormLeftCss(value) {
-            var editor = CodeMirror.fromTextArea(document.getElementById('formLeftCss'), {
-                lineNumbers: true,
-                mode: 'css',
-                theme: 'dracula'
-            });
+            codeMirrorConfig.mode = 'css';
+            var editor = CodeMirror.fromTextArea(document.getElementById('formLeftCss'), codeMirrorConfig);
             editor.setValue(value);
             editor.on('change', function(self, changeValue) {
                 $('#formLeftCss').val(self.getValue());
@@ -548,11 +556,8 @@
         }
 
         function initFormCenterCss(value) {
-            var editor = CodeMirror.fromTextArea(document.getElementById('formCenterCss'), {
-                lineNumbers: true,
-                mode: 'css',
-                theme: 'dracula'
-            });
+            codeMirrorConfig.mode = 'css';
+            var editor = CodeMirror.fromTextArea(document.getElementById('formCenterCss'), codeMirrorConfig);
             editor.setValue(value);
             editor.on('change', function(self, changeValue) {
                 $('#formCenterCss').val(self.getValue());
@@ -560,11 +565,8 @@
         }
 
         function initFormRightCss(value) {
-            var editor = CodeMirror.fromTextArea(document.getElementById('formRightCss'), {
-                lineNumbers: true,
-                mode: 'css',
-                theme: 'dracula'
-            });
+            codeMirrorConfig.mode = 'css';
+            var editor = CodeMirror.fromTextArea(document.getElementById('formRightCss'), codeMirrorConfig);
             editor.setValue(value);
             editor.on('change', function(self, changeValue) {
                 $('#formRightCss').val(self.getValue());