【JS】ACE.js 自定义代码提示

ACE.js 自定义代码提示

时间:2016-09-09 14:15:41
作者:zhongxia
源码地址:https://github.com/ajaxorg/ace

Ace.js是一款开源的 web编辑器,内置强大的代码提示,快捷键功能。具体了解看官网介绍。

一、背景

由于在产品中,需要用到 输入 数据库名. 弹出数据库下所有表的提示框, 方便用户的使用。
如图:

解决方案

1、使用ACE.js的提示框,替换提示数据【还未实现

在ACE.js上进行扩展,异步获取到表名数据,然后使用ACE 自带的提示框,提示, 这个是一个比较好的解决方案,但是需要去了解下ACE自定义提示是如何实现的,然后进行扩展。 目前还没有研究透。

参考文章

  1. ACE自定义提示如何实现?

2、监听ACE的change事件[如效果图一样]

如果遇到 xxx.这种情况,就把关键字xxx取出,然后去Ajax获取表名列表。
自己实现一个提示框的插件,然后在指定的位置弹出。

//获取当前焦点的位置(提示框使用 position:fixed)
let renderer = editor.renderer;
var pos = renderer.$cursorLayer.getPixelPosition(this.base, true);
var rect = editor.container.getBoundingClientRect();
pos.top += rect.top - renderer.layerConfig.offset;
pos.left += rect.left - editor.renderer.scrollLeft;
pos.left += renderer.gutterWidth;
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

友情链接更多精彩内容