文本编辑器添加搜索功能

.gitignore

@@ -1,3 +1,6 @@
+push.sh
+update.sh
+dist.tar
 .DS_Store
 node_modules/
 dist/

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jmal-cloud-view",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "jmal cloud",
   "author": "Jmal <zhushilun084@163.com>",
   "license": "MIT",

src/components/VueCodemirror/VueCodeMirror.vue

@@ -80,12 +80,15 @@
   require('codemirror/addon/hint/xml-hint.js')
 
   // Crtl-F 搜索
-  import 'codemirror/addon/dialog/dialog';
-  import 'codemirror/addon/scroll/annotatescrollbar';
-  import 'codemirror/addon/search/matchesonscrollbar';
-  import 'codemirror/addon/search/jump-to-line';
-  import 'codemirror/addon/search/search';
-  import 'codemirror/addon/search/searchcursor';
+
+  import 'codemirror/addon/scroll/annotatescrollbar.js'
+  import 'codemirror/addon/search/matchesonscrollbar.js'
+  import 'codemirror/addon/search/match-highlighter.js'
+  import 'codemirror/addon/search/jump-to-line.js'
+  import 'codemirror/addon/dialog/dialog.js'
+  import 'codemirror/addon/dialog/dialog.css'
+  import 'codemirror/addon/search/searchcursor.js'
+  import 'codemirror/addon/search/search.js'
 
   let CodeMirror = require('codemirror/lib/codemirror.js')
   require('codemirror/lib/codemirror.css')
@@ -102,7 +105,11 @@
           return {
             mode: 'text/javascript',
             lineNumbers: true,
-            lineWrapping: true
+            lineWrapping: true,
+            // foldGutter: true, // 启用行槽中的代码折叠
+            // // 在行槽中添加行号显示器、折叠器、语法检测器
+            // gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter", "CodeMirror-lint-markers"],
+            // lint: true,
           }
         }
       },
@@ -113,26 +120,6 @@
         nowValue: ''
       }
     },
-    // ready: function () {
-    //   let that = this
-    //   this.editor = CodeMirror.fromTextArea(this.$el.querySelector('textarea'), this.options)
-    //   this.editor.setValue(this.value)
-    //   this.editor.on('change', function(cm) {
-    //     console.log('change')
-    //     if (that.skipNextChangeEvent) {
-    //       that.skipNextChangeEvent = false
-    //       return
-    //     }
-    //     that.nowValue = cm.getValue()
-    //     if (!!that.$emit) {
-    //       that.$emit('change', cm.getValue())
-    //     }
-    //   })
-    //   this.editor.on("cursorActivity", () => {
-    //     console.log('cursorActivity')
-    //     this.editor.showHint();
-    //   });
-    // },
     beforeMount(){
       this.onKeyDown = this.onKeyDown.bind(this);
       document.addEventListener('keydown', this.onKeyDown);
@@ -153,13 +140,10 @@
         }
       })
 
-      this.editor.on("cursorActivity", () => {
-        console.log('cursorActivity')
-        // this.editor.showHint();
-      });
+      console.log(this.editor)
 
       this.$nextTick(()=>{
-        this.editor.clearHistory();
+        this.editor.clearHistory()
       })
     },
     watch: {
@@ -173,7 +157,7 @@
           this.editor.scrollTo(0, 0)
           // this.editor.scrollTo(scrollInfo.left, scrollInfo.top)
         }
-        this.editor.clearHistory();
+        this.editor.clearHistory()
       },
       'options': function (newOptions, oldVal) {
         if (typeof newOptions === 'object') {
@@ -201,11 +185,6 @@
           event.stopPropagation();
           event.preventDefault();
         }
-        const isF = key === 'f' || code === 'KeyF' || keyCode === 70;
-        if (isF && this.editor) {
-          this.editor.execCommand('find');
-          event.preventDefault();
-        }
       },
     },
     beforeDestroy: function () {

src/components/preview/SimTextPreview.vue

@@ -58,25 +58,25 @@
     computed: {
       options: function () {
         return {
-          mode: this.codeMode,//代码高亮
+          mode: this.codeMode,// 代码高亮
           smartIndent: true, // 智能缩进
           indentUnit: 4, // 智能缩进单位为4个空格长度
           indentWithTabs: true, // 使用制表符进行智能缩进
           styleActiveLine: true, // 显示选中行的样式
           lineNumbers: true, //显示行号
-          lineWrapping: this.lineWrapping,//代码折叠
-          foldGutter: true, // 启用行槽中的代码折叠
-          // 在行槽中添加行号显示器、折叠器、语法检测器
-          gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter", "CodeMirror-lint-markers"],
+          lineWrapping: this.lineWrapping, //代码换行显示
+          // foldGutter: true, // 启用行槽中的代码折叠
+          // // 在行槽中添加行号显示器、折叠器、语法检测器
+          // gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter", "CodeMirror-lint-markers"],
+          lint: true,
           readOnly: this.readOnly,
           theme: 'darcula',
           // theme: 'default',
           fullScreen: false, // 全屏
-          matchBrackets: true, //括号匹配
+          matchBrackets: true, // 括号匹配
           hintOptions: {
             completeSingle: false
           },
-          lint: true,
           extraKeys: {'ctrl-space': 'autocomplete'}, //智能提示
         }
       }
@@ -91,7 +91,7 @@
         codeMode: 'javascript',
         previewMode: true,
         lineWrapping: false,
-        readOnly: this.$store.state.user.token ? false : true,
+        readOnly: !this.$store.state.user.token,
         isShowUpdateBtn: false,
         updating: false,
         loading: {},