impl Codemirror

lib/views/admin/customize.html

@@ -43,7 +43,13 @@
 
         <div class="form-group">
           <div class="col-xs-12">
-            <textarea class="form-control" type="textarea" name="settingForm[customize:css]" rows="20">{{ settingForm['customize:css'] }}</textarea>
+            <textarea id="taCustomCss" class="form-control" type="textarea" name="settingForm[customize:css]" rows="20">{{ settingForm['customize:css'] }}</textarea>
+          </div>
+          <div class="col-xs-12">
+            <p class="help-block text-right">
+              <i class="fa fa-fw fa-keyboard-o" aria-hidden="true"></i>
+              Ctrl+Space でコード補完
+            </p>
           </div>
         </div>
 
@@ -111,9 +117,36 @@
 
   </script>
 
+  <!-- CodeMirror -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/g/codemirror@4.5.0(codemirror.css+addon/hint/show-hint.css)">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.ui/1.11.4/jquery-ui.min.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/codemirror/4.5.0/theme/eclipse.css">
+  <style>
+    .CodeMirror {
+      border: 1px solid #eee;
+    }
+  </style>
+  <script src="https://cdn.jsdelivr.net/g/codemirror@4.5.0(codemirror.min.js+addon/lint/css-lint.js+mode/css/css.js+addon/hint/css-hint.js+addon/hint/show-hint.js+addon/edit/matchbrackets.js),jquery.ui@1.11.4"></script>
+  <script>
+    var editor = CodeMirror.fromTextArea(document.getElementById('taCustomCss'), {
+      mode: "css",
+      lineNumbers: true,
+      tabSize: 2,
+      indentUnit: 2,
+      theme: 'eclipse',
+      matchBrackets: true,
+      extraKeys: {"Ctrl-Space": "autocomplete"},
+    });
+    // resizable with jquery.ui
+    $(editor.getWrapperElement()).resizable({
+      resize: function() {
+        editor.setSize($(this).width(), $(this).height());
+      }
+    });
+  </script>
+
 </div>
 {% endblock content_main %}
 
 {% block content_footer %}
 {% endblock content_footer %}
-