codemirror⾃定义弹出提⽰框内容
效果如下：
⼀.引⼊codemirror库
import 'codemirror/theme/ambiance.css' // 主题样式
import 'codemirror/lib/codemirror.css'
import 'codemirror/addon/hint/show-hint.css'
import 'codemirror/addon/hint/show-hint.js'
let CodeMirror = require('codemirror/lib/codemirror')
⼆.使⽤codemirror
export default {
name: 'codeMirror',
data () {
return {
code: ''
}
},
mounted () {
var editor = CodeMirror.ElementById('mycode'), {
lineNumbers: true,
extraKeys: {
'Ctrl': 'autocomplete'
},
mode: {
name: 'text/x-zzzz' // ⾃定义的hint库
},
// hintOptions: {// ⾃定义提⽰选项
//  tables: {appp: ['name()', 'score()', 'birthDate'], abpppp: ['name', 'score', 'birthDate'], app: ['name', 'score', 'birthDate'], version: ['name', 'score', 'birthDate'], d      // },
theme: 'ambiance' // 主题
})
<('cursorActivity', function () {
editor.showHint()
})
}
}
三.textare界⾯
<template>
<textarea id="mycode" class="codesql" v-model="code" ></textarea>
</template>
<style>
.codesql {
font-size: 11pt;
font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
}
</style>
四.现在进⼊到⾃定义提⽰内容部分代码的编写
html自动弹出公告代码
1.此js代码⽂件需要放在项⽬的node_modules\codemirror\addon\hint路径下，因为使⽤的相对路径引⽤依赖库。
(function (mod) {
if (typeof exports === 'object' && typeof module === 'object') // CommonJS
{ mod(require('../../lib/codemirror')) } else if (typeof define === 'function' && define.amd) // AMD
{ define(['../../lib/codemirror'], mod) } else // Plain browser env
{ mod(CodeMirror) }
})(function (CodeMirror) {
'use strict'
CodeMirror.defineMode('zzzz', function (config, parserConfig) {
var jsonldMode = parserConfig.jsonld
var isOperatorChar = /[+\-*&%=<>!?|~^@]/
function parseWords (str) {
var obj = {},
words = str.split(' ')
for (var i = 0; i < words.length; ++i) obj[words[i]] = true
return obj
}
// 关键字
var keywords = parseWords('int numeric decimal date varchar char bigint float double bit binary text set timestamp toString primitive money real number intege    var type, content
function ret (tp, style, cont) {
type = tp
content = cont
return style
}
function tokenBase (stream, state) {
var beforeParams = state.beforeParams
state.beforeParams = false
var ch = ()
if (ch == '"' || ch == "'") {
kenize(stream, state)
} else if (ch == '.' && stream.match(/^\d[\d_]*(?:[eE][+\-]?[\d_]+)?/)) {
return ret('number', 'number')
} else if (ch == '[') {
stream.skipTo(']')
stream.eat(']')
return ret('string', 'string')
} else if (/\d/.test(ch)) {
stream.eatWhile(/[\w\.]/)
return 'number'
} else {
stream.eatWhile(/[\w\$_{}\xa1-\uffff]/)
stream.eatWhile(/[\w\$_{}\xa1-\uffff]/)
var word = stream.current()
if (keywords && keywords.propertyIsEnumerable(word)) {
state.beforeParams = true
return 'keyword'
}
return null
}
}
function tokenString (quote) {
return function (stream, state) {
var escaped = false,
next
if (jsonldMode && stream.peek() == '@' && stream.match(isJsonldKeyword)) {          kenize = tokenBase
return ret('jsonld-keyword', 'meta')
}
while ((next = ()) != null) {
if (next == quote && !escaped) break
escaped = !escaped && next == '\\'
}
if (!escaped) kenize = tokenBase
return ret('string', 'string')
}
}
return {
startState: function () {
return {
tokenize: tokenBase,
beforeParams: false,
inParams: false
}
},
token: function (stream, state) {
if (stream.eatSpace()) return null
kenize(stream, state)
}
}
})
//是否包含中括号
function getZKH (list,str) {
let location = str.search(/[\w]+\[[\w\s,]*\]\.$/i);
if (location != -1){
str = str.substring(location,str.length);
str = str.substring(0,str.search(/\[[\w\s,]*\]\.$/i))
console.log(str)
for (let key in list){
if(key == str){
return list[key];
}
}
}
return null;
}
//是否包含圆括号
function getYKH (list,str) {
let location = str.search(/[\w]+\([\w\s,]*\)\.$/i);
if (location != -1){
str = str.substring(location,str.length);
str = str.substring(0,str.search(/\([\w\s,]*\)\.$/i))
console.log(str)
for (let key in list){
if(key == str){
if(key == str){
return list[key];
}
}
}
return null;
}
function getNormal (list,str) {
let location = str.search(/[\w]+\([\w\s,]*\)\.[\w]*$/i);
let result = null;
if (location != -1){  //匹配到有前缀⽅法  ()
str = str.substring(location,str.length);
if (str.search(/\.$/i)+1 == str.length){ //.后⽆字符
return getYKH(list,str);
}
let tstr = str.substring(str.search(/\.[\w]+$/i)+1,str.length);      str = str.substring(0,str.search(/\.[\w]+$/i));
let res = getYKH(list,str);
if(res != null){
result = []
for (let v in res){
if (v.indexOf(tstr) == 0){
result.push(v);
}
}
}
return result;
}
location = str.search(/[\w]+\[[\w\s]*\]\.[\w]*$/i);
if (location != -1){  //匹配到有前缀⽅法  []
str = str.substring(location,str.length);
if (str.search(/\.$/i)+1 == str.length){ //.后⽆字符
return getZKH(list,str);
}
let tstr = str.substring(str.search(/\.[\w]+$/i)+1,str.length);      str = str.substring(0,str.search(/\.[\w]+$/i));
let res = getYKH(list,str);
if(res != null){
result = []
for (let v in res){
if (v.indexOf(tstr) == 0){
result.push(v);
}
}
}
return result;
}
location = str.search(/[\w]+\.$/i);
if (location != -1){
str = str.substring(location,str.length-1);
result = []
for (let v in list){
if (v == str){
result = list[v];
break;
}
}
return result;
}
location = str.search(/[\w]+$/i);
if (location != -1){
str = str.substring(location,str.length);
result = []
for (let v in list){
if (v.indexOf(str) == 0){
result.push(v);
result.push(v);
}
}
return result;
}
return result;
}
function dataList(cm){
let customData = cm.options.hintOptions.tables;
var hintList = { //提⽰的数据
'g': ['V()','E()','has()','open()','close()','inV()','inE()','out()','outV()','outE()','label()','store()','next()','addVertex()','clazz()','limit()','traversal()','withBulk()','values()','s      'g()':[],
'V':['limit()','length()'],
'limit':['a()','b()','c()'],
'targetLabel()':[],'sourceLabel()':[],'indexLabel()':[],'indexLabels()':[],'edgeLabel()':[],'vertexLabel()':[],'propertyKey()':[],'getPropertyKey()':[],'getVertexLabel()':[],    }
var cur = cm.getCursor(), token = cm.myGetTokenAt(cur) //重写getTokenAt()⽅法，返回⼀整⾏字符串
let inputParam = ;
let start = inputParam.search(/\.[\w]*$/i)
let result = getNormal(hintList,inputParam);
if (result != null) return [result,start];
return []
}
// ⾃动补全
var list = dataList(cm)
var cur = cm.getCursor(), //获取游标 eg.键盘输⼊aabb，cur的值为： {line: 0, ch: 4, sticky: null}
token = cm.getTokenAt(cur); //⽰例token的值为： {start: 0, end: 4, string: "aabb", type: null, state: {…}}
var start = token.start,
end = cur.ch
if (list.length>1){
let v = list[1];
list = list[0];
if (v != -1)
start = v + 1;
}
if (list.length) {
return {
list: list,
from: CodeMirror.Pos(cur.line, start),
to: CodeMirror.Pos(cur.line, end)
}
}
})
CodeMirror.defineMIME('text/x-zzzz', 'zzzz') //定义别名为text/x-zzzz
})
2.获取整⾏字符串 codemirror.js ⽂件。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。