[發明專利]一種Angular內SQL在線編輯器的實現方法

在審

• 申請號: 201910256496.1
• 申請日: 2019-04-01
• 公開（公告）號: CN109933318A
• 公開（公告）日: 2019-06-25
• 發明（設計）人: 周睿
• 申請（專利權）人: 山東浪潮云信息技術有限公司
• 主分類號: G06F8/35
• 分類號: G06F8/35
• 代理公司: 濟南信達專利事務所有限公司 37100
• 代理人: 姜明

1.一種Angular內SQL在線編輯器的實現方法，其特征在于，包括以下步驟：

(1)通過Angular組件的形式對接CodeMirror，在Angular組件內完成對CodeMirror的封裝，轉換成Type Script語言接口；

(2)需要在Angular工程內實現SQL在線編輯器時，直接調用上述Angular組件即可。

2.根據權利要求1所述的Angular內SQL在線編輯器的實現方法，其特征在于：所述步驟(1)中，在Angular組件中的package文件中引入CodeMirror，在style.css中引入CodeMirror的lib下的codemirror.css和codemirror/addon/hint路徑下的show-hint.css，即可實現編輯器中SQL的基本樣式和自動補全的樣式。

3.根據權利要求2所述的Angular內SQL在線編輯器的實現方法，其特征在于：在Angular組件中引入CodeMirror的show-hint.js插件和SQL-hint.js插件，即可實現SQL關鍵詞的自動提示功能。

4.根據權利要求2所述的Angular內SQL在線編輯器的實現方法，其特征在于：Angular前端獲取到數據庫表名相關數據時，賦值給CodeMirror的hintOptions下的tables屬性，即可實現數據庫表名的自動補全功能。

5.根據權利要求1所述的Angular內SQL在線編輯器的實現方法，其特征在于：所述步驟(1)中，通過聲明一個Angular組件完成對CodeMirror的封裝，并暴露出CodeMirror的option配置和是否自動聚焦屬性綁定，鼠標活動事件監聽綁定，文本雙向綁定。

6.根據權利要求6所述的Angular內SQL在線編輯器的實現方法，其特征在于：引入Angular組件后，配置是否自動聚焦屬性，并為組件屬性輸入設定的布爾值，即可實現對編輯器是否自動聚焦個性化配置。

7.根據權利要求6所述的Angular內SQL在線編輯器的實現方法，其特征在于：引入Angular組件后，通過監聽鼠標光標位置，即可實時在編輯器下方獲取光標所在的位置，實現編輯器顯示行號和列號的功能。

8.根據權利要求6所述的Angular內SQL在線編輯器的實現方法，其特征在于：結合CodeMirror的原有插件和SQL-formatter插件，即可實現SQL文本的格式化顯示的功能；利用CodeMirror的快捷鍵綁定，調用Angular組件對SQL文本內容進行格式化，由于SQL文本內容綁定在ngModel屬性，利用Angular的ngModel雙向綁定特性，即可實現格式化之后的SQL文本在界面的展示。

9.根據權利要求1所述的Angular內SQL在線編輯器的實現方法，其特征在于：所述步驟(2)中，編程人員只關注Angular組件本身暴露出來的屬性綁定，不需要關注CodeMirror如何在Angular里調用。