flowable-engine-web/src/views/Code.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
 12222313
-    <codemirror v-model="item" :options="cmOptions" class="code" @ready="onCmReady3" @focus="onCmFocus"
+    <codemirror :value="item" :options="cmOptions" class="code" ref="myCmGenerate"
-                    @input="onCmCodeChange" ref="myCmGenerate"></codemirror>
+                @input="changes"></codemirror>
   </div>
 </template>
 
@@ -10,10 +10,13 @@
 import {codemirror} from 'vue-codemirror'
 // 引入主题 可以从 codemirror/theme/ 下引入多个
 import "vue-codemirror/node_modules/codemirror/lib/codemirror.css";
+import "vue-codemirror/node_modules/codemirror/lib/codemirror.js";
 import 'vue-codemirror/node_modules/codemirror/theme/idea.css'
+import 'vue-codemirror/node_modules/codemirror/theme/oceanic-next.css'
 // 引入语言模式 可以从 codemirror/mode/ 下引入多个
 import "vue-codemirror/node_modules/codemirror/mode/javascript/javascript"; // 代码高亮必须引入
-
+//代码补全
+import 'vue-codemirror/node_modules/codemirror/addon/hint/javascript-hint.js';
 export default {
   components:{codemirror},
   data() {
@@ -23,32 +26,28 @@ export default {
           '      console.log(instance)\n' +
           '      console.log(event)\n' +
           '    },',
+      foldContent : "46546555656545",
       cmOptions:{
-        tabSize: 4, // tab
+        mode: 'text/html', // 模式
-        indentUnit: 4,
+        theme: 'idea', // 主题
-        attach:{},
+        lineNumbers: true, // 是否显示行号
-        styleActiveLine: true, // 高亮选中行
+        // lineWrapping: true,
-        lineNumbers: true, // 显示行号
+        // styleActiveLine: true, // 高亮选中行
-        styleSelectedText: true,
+        // highlightSelectionMatches: { showToken: /w/, annotateScrollbar: true }, // 可以启用该选项来突出显示当前选中的内容的所有实例
-        line: true,
+        // line: true,
-        foldGutter: true, // 块槽
+        // mode: 'text/x-java',
-        gutters: ['CodeMirror-linenumbers', "lock", "warn"],
+        // gutters: ['CodeMirror-lint-markers'],
-        highlightSelectionMatches: { showToken: /w/, annotateScrollbar: true }, // 可以启用该选项来突出显示当前选中的内容的所有实例
+        // theme: 'codemirror',
-        mode:'javascript',
+        // keyMap: 'sublime',
-        // hint.js options
+        // matchBrackets: true,
-        hintOptions: {
+        // showCursorWhenSelecting: false,
-          // 当匹配只有一项的时候是否自动补全
+        // hintOptions: {
-          completeSingle: false
+        //   // 当匹配只有一项的时候是否自动补全
-        },
+        //   completeSingle: true
-        // 快捷键 可提供三种模式 sublime、emacs、vim
+        // },
-        keyMap: 'sublime',
+        // foldGutter: true, // 支持折叠
-        matchBrackets: true,
-        showCursorWhenSelecting: false,
-        // scrollbarStyle:null,
-        // readOnly:true,  //是否只读
-        theme: 'material', // 主题 material
         extraKeys: { 'Ctrl': 'autocomplete' }, // 可以用于为编辑器指定额外的键绑定，以及keyMap定义的键绑定
-        lastLineBefore:0
+        gutters: ['CodeMirror-lint-javascript', 'CodeMirror-foldgutter']
       }
     }
   },
@@ -56,9 +55,6 @@ export default {
     console.log("rererer")
   },
   methods: {
-    onCmReady3() {
-      // this.$refs.myCmGenerate.codemirror.setSize('400px', '400px')
-    },
     onCmFocus(instance, event) {
       console.log(instance)
       console.log(event)
@@ -66,29 +62,16 @@ export default {
     onCmCodeChange(instance, obj) {
       console.log(instance)
       console.log(obj)
+    },
+    changes(){
+
     }
   }
 }
 
-export class Code {
-}
 </script>
-<style>
-.CodeMirror-scroll {
-  overflow: scroll !important;
-  margin-bottom: 0;
-  margin-right: 0;
-  padding-bottom: 0;
-  height: 100%;
-  outline: none;
-  position: relative;
-  border: 1px solid #dddddd;
-}
-</style>
 <style lang="less" scoped>
-.code-mirror {
+.code {
-  font-size: 13px;
-  line-height: 150%;
   text-align: left;
 }
 </style>

flowable-engine-web/src/views/common/process/config/TriggerNodeConfig.vue

@@ -81,7 +81,7 @@
           <div v-if="config.http.handlerByScript">
             <div>
               <span>请求成功😀：</span>
-              <vue-codemirror :options="cmOptions"  v-model="config.http.success"/>
+              <codemirror :options="cmOptions"  v-model="config.http.success"/>
             </div>
             <div>
               <span>请求失败😥：</span>
@@ -108,7 +108,7 @@
 </template>
 
 <script>
-import { VueCodemirror } from 'vue-codemirror'
+import { codemirror } from 'vue-codemirror'
 // 引入主题 可以从 codemirror/theme/ 下引入多个
 import "vue-codemirror/node_modules/codemirror/lib/codemirror.css";
 import 'vue-codemirror/node_modules/codemirror/theme/idea.css'
@@ -116,14 +116,6 @@ import 'vue-codemirror/node_modules/codemirror/theme/idea.css'
 import "vue-codemirror/node_modules/codemirror/mode/javascript/javascript"; // 代码高亮必须引入
 
 
-// import { VueCodemirror } from 'vue-codemirror';
-// import 'vue-codemirror/node_modules/codemirror/theme/liquibyte.css';//导入选中的theme主题,与初始化theme配置一致
-// import 'vue-codemirror/node_modules/codemirror/addon/hint/show-hint.css';//导入自动提示核心样式
-//
-// import 'vue-codemirror/node_modules/codemirror/mode/sql/sql.js';//导入使用的语言语法定义文件，初始化mode配置一致
-// import 'vue-codemirror/node_modules/codemirror/addon/edit/matchbrackets.js';
-// import 'vue-codemirror/node_modules/codemirror/addon/hint/show-hint.js';//导入自动提示核心文件
-// import 'vue-codemirror/node_modules/codemirror/addon/hint/sql-hint.js';//导入指定语言的提示文件
 
 export default {
   name: "TriggerNodeConfig",
@@ -157,7 +149,7 @@ export default {
         // hint.js options
         hintOptions: {
           // 当匹配只有一项的时候是否自动补全
-          completeSingle: false
+          completeSingle: true
         },
         // 快捷键 可提供三种模式 sublime、emacs、vim
         keyMap: 'sublime',