修改文本编辑器

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)

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)
           }