vue+el-dialog中使用codemirror 遇到的问题

注：mode为‘javascript’

问题一：由于是在el-dialog弹框中使用codemirror,代码提示框不出现
解决方法：由于代码提示框样式的z-index为10 小于el-dailog的z-index；所以可以给代码提示框设置样式

.CodeMirror-hints{
    z-index: 3000 !important;
}

问题二：需检测js代码语法格式正确与否；所以安装了jshint
npm i jshint --save ;在main.js 中引入import jshint from “jshint”; window.JSHINT = jshint.JSHINT;
但发现检测提示信息弹框被el-dialog遮挡并且对于es6语法会出现⚠️警告
解决方法：1:给检测提示信息弹框设置样式

.CodeMirror-lint-tooltip{
	z-index: 3000 !important;
}

2.解决不支持es6语法的提示

lint:{
	esversion: 6
}//在codemirror option配置里 将lint：true改为如上

问题三：想在原有的js代码提示的基础上，新增一些自定义的代码提示
解决方法：
在codemirror option配置里，将hintOptions改为如下

hintOptions: {hint: this.handleShowHint, completeSingle: false},

handleShowHint方法如下

//代码提示处理
			handleShowHint(){
				const  cmInstance = this.$refs.myCm.codemirror
				let cursor = cmInstance.getCursor();// 得到光标
				let curLine = cmInstance.getLine(cursor.line);// 得到行内容
				const jshint = CodeMirror.hint.javascript(cmInstance,this.cmOptions)//获取js自带的提示（cmOptions是codemirror的option配置）
				const anyhint = CodeMirror.hint.anyword(cmInstance,this.cmOptions)//获取anyword自带提示
				const definehint = [
					    "callback()",
						"unique()",
						"many()",
						"log"		
				] // 自定义提示
				var word = /[\w$]+/;
				var end = cursor.ch, start = end;
				while (start && word.test(curLine.charAt(start - 1))) --start;
				var curWord = start != end && curLine.slice(start, end);//此处为了解决防止curLine中有\t、空格而导致匹配不成功的情况
				let found = [];
				function maybeAdd(str) {
					if (str.lastIndexOf(curWord, 0) == 0 && !arrayContains(found, str)) 
					found.push(str);
				}
				forEach(definehint,maybeAdd);
				
				function arrayContains(arr, item) {
					if (!Array.prototype.indexOf) {
					var i = arr.length;
					while (i--) {
						if (arr[i] === item) {
						return true;
						}
					}
					return false;
					}
					return arr.indexOf(item) != -1;
				}
				
				function forEach(arr, f) {
					for (var i = 0, e = arr.length; i < e; ++i) f(arr[i]);
				}
				const words = new Set([...found,...anyhint.list,...jshint.list])//合并所有提示
				if(words.size >0){
					return {
						list: Array.from(words), 
						from: jshint.from, 
						to: jshint.to
					}
				}
			}
	    }

问题四：实现快捷键对js代码格式化

//安装js代码格式化插件
npm i js-beautify --save

//在需要的页面引入
import {js_beautify} from 'js-beautify';

//
extraKeys: {
	"Ctrl-Alt-L":(cm)=>{//自定义格式化代码的快捷键为“Ctrl-Alt-L”
		this.editorValue = js_beautify(cm.getValue());
		this.$emit('onChangeCode',js_beautify(cm.getValue()));
	}
},