## 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自定義提示如何實現?](http://wsztrush.github.io/%E7%BC%96%E7%A8%8B%E6%8A%80%E6%9C%AF/2015/11/06/ACEJS-B.html?utm_source=tuicool&utm_medium=referral)
### 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;
~~~
- 前言
- 【00】如何寫
- 【STAT法則寫簡歷】
- 【01】前端
- 【20160829 前端面試題】
- 【騰訊IMWeb】筆試題(沒有答案)
- 【桑世龍】前端筆試題(沒有答案)
- 【瀏覽器輸入URL后發生了什么】
- 【JS截圖并生成圖片】
- 【20160924】Sass 入門
- 【02】技巧
- 【01】GOOGLE搜索技巧
- 【02】Chrome跨域訪問線上接口
- 【One Day One Tip】
- 【20160830】~ 閉包
- 【20160831】~ 繼承的幾種實現方式
- 【20160901】~瀏覽器輸入URL到頁面展示完成,發生了什么?(一)
- 【20160902】~瀏覽器輸入URL,發生過程系列(轉載)
- 【20160903】~ video在不同平臺下的差異性
- 【20160906】~webpack之sourceMap
- 【20160909】ACE自定義代碼提示
- 【20160910】Mac Nw.js 環境安裝
- 【99】轉載筆記
- 用一道面試題考察對閉包的理解