本文主要介紹應用在我們項目中的一款開源在線代碼編輯器的使用情況肤舞。
一熄守,集成進項目弊仪。
公司的項目是一個基于echart的大數(shù)據(jù)可視化分析平臺跳芳,在某些場景下膀钠,用戶需要手動去編寫一些javascript腳本來實現(xiàn)自定義的功能掏湾,因此需要引入一個在線代碼編輯器裹虫。之前用的是code mirror,但是因為樣式不美觀融击,bug多筑公,我將其更換成了兩一個開源編輯器:ace editor。下面是獨立的demo效果圖尊浪。
使用方法:
1匣屡,去該項目的github頁面下載壓縮包解壓。得到ace-builds-master文件夾拇涤。
2捣作,在頁面預備一個html容器,添加上圖中的js初始化和簡易配置代碼鹅士,容器被定位后會調(diào)用相關(guān)的方法加載編輯器券躁。
更多的資料可以參閱官方的api文檔。
二掉盅,bug修復也拜。
大概一年以后,項目在使用過程中出現(xiàn)了中文輸入的bug趾痘,影響了用戶體驗慢哈。經(jīng)過排查,發(fā)現(xiàn)是chrome瀏覽器更新的bug所導致永票。
最后通過更新ace-builds-master下的src-noconflict文件夾來修復卵贱。
官方的更新日志也證實了這一點:
2016.12.03 Version 1.2.6
* Fixed IME handling on new Chrome
* Support for php 7 in the syntax checker
2016.08.16 Version 1.2.5
* Fixed regression in noconflict mode
2016.07.27 Version 1.2.4
* Maintenance release with several new modes and small bugfixes
2016.01.17 Version 1.2.3
以上