codemirror 5.2版本实现自定义提示

1.页面引入相关JS文件

<script type="text/javascript" src="/static/lib/codemirror-5.2/codemirror/lib/codemirror.js"></script>
<script type="text/javascript" src="/static/lib/codemirror-5.2/codemirror/mode/javascript/javascript.js"></script>
<script type="text/javascript" src="/static/lib/codemirror-5.2/codemirror/addon/hint/show-hint.js"></script>
<script type="text/javascript" src="/static/lib/codemirror-5.2/codemirror/addon/hint/javascript-hint.js"></script>
<script type="text/javascript" src="/static/lib/codemirror-5.2/codemirror/addon/hint/anyword-hint.js"></script>

2.初始化codemirror

需要一个原生textarea作为codemirror的初始化容器。

<textarea id="code" name="code" style="display: none"></textarea>

this.editor = CodeMirror.fromTextArea(document.getElementById('code'), {lineNumbers: false,   // 不显示行号extraKeys: {'Ctrl': 'autocomplete'},    // 切换默认提示快捷键theme: 'sqlTheme',    // 主题风格lineWrapping: true,  // 自动换行autofocus: true,
});

3.设置自动提示

this.editor.on('cursorActivity', () => {if (this.editor.getValue() != this.editorData.content) {this.editor.showHint(this.handleShowHint());  // 传入处理自动提示的函数}
});

handleShowHint () {const cur = this.editor.getCursor(); // 获取当前最新输入const curLine = this.editor.getLine(cur.line);  // 获取当前所在行数const end = cur.ch; // 获取最新输入结束位置const start = end - 1;    // 设置检测输入的起始位置（本案例中只检测最新输入的一个字符）const word = curLine.charAt(start);  // 获取最新输入的内容（本案例中为最新输入的一个字符）// list为筛选出的自动提示项的数组const list = this.paramsData.filter(param => {return param.indexOf(word) > -1;});return {hint: function() {return {from: CodeMirror.Pos(cur.line, start), // 需要自动替换的起始位置（本案例中为最新输入的一个字符的位置）to: CodeMirror.Pos(cur.line, end),   // 需要自动替换的终止位置（本案例中为当前输入最末端）list, // 由自动提示项组成的数组}}};
}

其他注意点

给codemirror设置新文本后，需要调用refresh方法，才能更新显示内容。

this.editor.setValue(val);
setTimeout(() => {this.editor.refresh();
}, 200);

参考资料

CodeMirror 一些简单配置

CodeMirror sql智能提示功能修改

codemirror 5.2版本实现自定义提示相关推荐

netbeans7.4_NetBeans 7.1：创建自定义提示
netbeans7.4 我已经在帖子中对我最喜欢的NetBeans提示进行了讨论,这些帖子中包含用于现代化Java代码的七个NetBeans提示和七个不可或缺的NetBeans Java提示 . 这两 ...
NetBeans 7.1：创建自定义提示
我已经在帖子中介绍了一些我最喜欢的NetBeans提示 ,这些信息是用于使Java代码现代化的七个NetBeans提示和七个不可或缺的NetBeans Java提示 . 这两个帖子中涉及的十四个提示仅 ...
wamp添加mysql版本_PHPWAMP自定义添加PHP版本教程，支持无限添加PHP和Mysql版本
我最新开发的PHPWAMP8.8.8.8n可以支持无限添加Mysql版本和php版本, 因为新版的自定义相对旧版本还是有点区别的,所以重写自定义PHP版本教程. 目前有很多网友自发在网上编写了PHPW ...
Android Studio 3.0+ 版本的自定义lint检查
Android Studio 3.0+ 版本的自定义lint检查定义LintModule 开发lint规则 lint库依赖新建log检查规则 LogDetactor IssueRegistry 注 ...
vue2实现codemirror在线代码编辑器（代码提示，行数显示..）
项目需求需要在管理系统模块中实现用户SQL语句自查询,实现一个代码编辑器,要求有执行,清空,代码提示,行数显示功能,,实现效果如下: -------------------------------- ...
微信小程序自定义模态框，官方版本与自定义可扩展版本
微信小程序自定义模态框,官方版本与自定义可扩展版本提示:文章最后有源码,可自取文章主要通过模仿官方的模态框进行自定义模态框的设计,我将会先讲述原理,然后给出源码,最后指出一些需要注意的地方提示: ...
原生html js css绘制折现图,HTML5教程 Chart.js自定义提示折线图
本篇教程探讨了HTML5教程 Chart.js自定义提示折线图,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < var randomScalingFactor ...
Swift5版本以上自定义回调函数报错
Swift5版本以上自定义回调函数报错最新swift版本要求在回调函数前面加入@escaping 关键字,以前不写,默认加入,现在不行了假设一个类写一个全局类方法,第一步写一个class ,代表类 ...
Android Studio 4.2Previw版本编译错误提示Disable offline mode and rerun the build
编译出现的问题项目在Android Studio 4.2Previw版本编译错误提示Disable offline mode and rerun the build No cached versio ...

codemirror 5.2版本实现自定义提示

1.页面引入相关JS文件

2.初始化codemirror

3.设置自动提示

其他注意点

codemirror 5.2版本实现自定义提示相关推荐

最新文章

热门文章