From e28df1cf218a81013bf4f0c297ca5c162fc9a7fe Mon Sep 17 00:00:00 2001
From: jmal <zhushilun084@gmail.com>
Date: Sun, 24 May 2020 16:13:15 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=96=87=E6=9C=AC=E7=BC=96?=
 =?UTF-8?q?=E8=BE=91=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../VueCodemirror/VueCodeMirror.vue           | 68 ++++++++++++++-----
 src/components/preview/SimTextPreview.vue     | 23 +++++--
 2 files changed, 67 insertions(+), 24 deletions(-)

diff --git a/src/components/VueCodemirror/VueCodeMirror.vue b/src/components/VueCodemirror/VueCodeMirror.vue
index 2fe4f8a..e86dd06 100644
--- a/src/components/VueCodemirror/VueCodeMirror.vue
+++ b/src/components/VueCodemirror/VueCodeMirror.vue
@@ -7,21 +7,39 @@
 <script>
 
   // htmlmixed mode
-  require('codemirror/mode/vue/vue.js')
-  require('codemirror/mode/xml/xml.js')
-  require('codemirror/mode/javascript/javascript.js')
-  require('codemirror/mode/css/css.js')
-  require('codemirror/mode/shell/shell.js')
-  require('codemirror/mode/yaml/yaml.js')
-  require('codemirror/mode/swift/swift.js')
-  require('codemirror/mode/sql/sql.js')
-  require('codemirror/mode/sass/sass.js')
-  require('codemirror/mode/sas/sas.js')
-  require('codemirror/mode/php/php.js')
-  require('codemirror/mode/css/css.js')
-  require('codemirror/mode/markdown/markdown.js')
-  require('codemirror/mode/go/go.js')
-  require('codemirror/mode/dart/dart.js')
+  const modulesFiles = require.context("codemirror/mode", true, /\.js$/);
+
+  // you do not need `import app from './modules/app'`
+
+  // it will auto require all vuex module from modules file
+
+  const modules = modulesFiles.keys().reduce((modules, modulePath) => {
+
+    // set './app.js' => 'app'
+
+    const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, "$1");
+
+    const value = modulesFiles(modulePath);
+
+    modules[moduleName] = value.default;
+
+    return modules;
+
+  }, {});
+  // require('codemirror/mode/xml/xml.js')
+  // require('codemirror/mode/javascript/javascript.js')
+  // require('codemirror/mode/css/css.js')
+  // require('codemirror/mode/shell/shell.js')
+  // require('codemirror/mode/yaml/yaml.js')
+  // require('codemirror/mode/swift/swift.js')
+  // require('codemirror/mode/sql/sql.js')
+  // require('codemirror/mode/sass/sass.js')
+  // require('codemirror/mode/sas/sas.js')
+  // require('codemirror/mode/php/php.js')
+  // require('codemirror/mode/css/css.js')
+  // require('codemirror/mode/markdown/markdown.js')
+  // require('codemirror/mode/go/go.js')
+  // require('codemirror/mode/dart/dart.js')
   // require('codemirror/mode/clike/clike.js')
 
   // theme
@@ -29,11 +47,28 @@
   require('codemirror/theme/ayu-dark.css')
   require('codemirror/theme/3024-day.css')
   require('codemirror/theme/3024-night.css')
+  require('codemirror/theme/ambiance.css')
+  require('codemirror/theme/seti.css')
 
-  // require hint addon for javacript
+  // 支持代码折叠
+  require('codemirror/addon/fold/foldgutter.css')
+  require('codemirror/addon/fold/foldcode.js')
+  require('codemirror/addon/fold/foldgutter.js')
+  require('codemirror/addon/fold/brace-fold.js')
+  require('codemirror/addon/fold/comment-fold.js')
+
+  // 全屏模式
+  require('codemirror/addon/display/fullscreen.css')
+  require('codemirror/addon/display/fullscreen.js')
+
+  // 自动补全
   require('codemirror/addon/hint/show-hint.js')
   require('codemirror/addon/hint/show-hint.css')
   require('codemirror/addon/hint/javascript-hint.js')
+  require('codemirror/addon/hint/anyword-hint.js')
+  require('codemirror/addon/hint/html-hint.js')
+  require('codemirror/addon/hint/xml-hint.js')
+  require('codemirror/addon/hint/css-hint.js')
 
   // Crtl-F 搜索
   import 'codemirror/addon/dialog/dialog';
@@ -70,7 +105,6 @@
       }
     },
     ready: function () {
-      console.log(6789)
       let that = this
       this.editor = CodeMirror.fromTextArea(this.$el.querySelector('textarea'), this.options)
       this.editor.setValue(this.value)
diff --git a/src/components/preview/SimTextPreview.vue b/src/components/preview/SimTextPreview.vue
index afa0ac4..38ba2b8 100644
--- a/src/components/preview/SimTextPreview.vue
+++ b/src/components/preview/SimTextPreview.vue
@@ -58,14 +58,19 @@
     computed: {
       options: function () {
         return {
-          mode: this.codeMode,
-          // tabSize: 2,
+          mode: this.codeMode,//代码高亮
+          // tabSize: 2,  // table键缩进
           styleActiveLine: true,
-          lineNumbers: true,
-          lineWrapping: this.lineWrapping,
+          lineNumbers: true, //显示行号
+          lineWrapping: this.lineWrapping,//代码折叠
+          foldGutter: true,
+          gutters:["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
           readOnly: this.readOnly,
           theme: 'idea',
-          extraKeys: {'Ctrl-Z': 'autocomplete'},
+          // theme: 'default',
+          fullScreen: false, // 全屏
+          matchBrackets: true, //括号匹配
+          extraKeys: {'Ctrl-I': 'autocomplete'}, //智能提示
         }
       }
     },
@@ -95,13 +100,17 @@
           message: '<span>&nbsp;&nbsp;正在加载数据...</span>'
         })
 
-        this.codeMode = 'javascript'
+        this.codeMode = 'text/javascript'
         let suffix = a.suffix
         const modeIndex =  modeInfo.findIndex(item => item.ext && item.ext.includes(suffix))
         if(modeIndex > -1){
           const mode = modeInfo[modeIndex].mode
           if(CodeMirror.modes.hasOwnProperty(mode)){
-            this.codeMode = mode
+            let mime = modeInfo[modeIndex].mime
+            if(!mime){
+              mime = modeInfo[modeIndex].mimes[0]
+            }
+            this.codeMode = mime
           }else{
             this.$message.warning("暂不支持的文件类型:",modeInfo[modeIndex].mime)
           }