由于在開發(fā)vue組件編輯工具中需要一款可以嵌入web的代碼編輯器，所以對目前的開源的基于javascript的代碼編輯器進(jìn)行了調(diào)研集灌。本文主要從編輯器的維護(hù)和更新狀態(tài)、功能完備度、擴(kuò)展性笛匙、外觀/交互、官網(wǎng)/文檔/api/demo犀变、支持/維護(hù)/社區(qū)妹孙、兼容性(瀏覽器)等方面進(jìn)行對比篩選。

1.編輯器統(tǒng)計(jì)數(shù)據(jù)

統(tǒng)計(jì)來源： Wikipedia Comparison of JavaScript-based source code editors

總覽：

image.png

上表中主要從最后的版本發(fā)布時(shí)間获枝，活躍狀況來判斷編輯器的維護(hù)和更新狀態(tài)蠢正，同時(shí)判斷是否開源也是選型的前提之一。

功能列表：

image.png

功能列表可以一目了然的把編輯器的功能完備度對比出來省店，作為現(xiàn)代的代碼編輯器嚣崭，語法主題高亮笨触，自動(dòng)補(bǔ)全縮進(jìn)，快捷鍵操作有鹿，搜索和替換等功能是必不可少的旭旭。

綜合上述兩個(gè)表的數(shù)據(jù)，結(jié)合部分編輯器的官網(wǎng)介紹和demo葱跋，篩選出三款編輯器：ACE, codemirror, monaco editor持寄，進(jìn)行更細(xì)致全面的比較。

2.codemirror

CodeMirror是一個(gè)用JavaScript為瀏覽器實(shí)現(xiàn)的多功能文本編輯器娱俺。它專門用于編輯代碼稍味，并附帶一些實(shí)現(xiàn)更高級編輯功能的語言模式和插件。其核心僅提供編輯器功能荠卷，其他功能通過豐富的API和插件實(shí)現(xiàn)模庐。CodeMirror的使用基于特定的程序語言模式(mode)，它對特定的語言進(jìn)行語法解析(parse)油宜，使編輯器能夠在解析結(jié)果基礎(chǔ)上進(jìn)行語法高亮掂碱，實(shí)現(xiàn)具有上下文感知(context-aware)的代碼補(bǔ)全、縮進(jìn)等功能慎冤。

image.png

編輯器的架構(gòu)圖：

image.png

2.1使用

引入codemirror.js/codemirror.css/ 對應(yīng)語言的mode文件(如: /mode/javascript/javascript.js );

整體功能及擴(kuò)展：

image.png

創(chuàng)建編輯器實(shí)例：

1.編輯器將append到 container元素中：var editor = CodeMirror(container, options);

2.或者直接替換textarea元素：var editor = CodeMirror.fromTextArea(myTextArea);

2.2 配置

 默認(rèn)配置從CodeMirror.defaults中獲取疼燥。可以更新此對象以更改頁面上的默認(rèn)值蚁堤，例如配置 輸入初始值醉者， 語法模式， 風(fēng)格主題披诗， 鍵盤映射撬即， 快捷鍵綁定。

2.3 event(事件)

    各種與CodeMirror相關(guān)的對象發(fā)出事件呈队，這些事件允許客戶端代碼對各種情況作出反應(yīng)剥槐。

事件的處理程序可以用事件觸發(fā)對象的on和off方法進(jìn)行注冊，主要由四類事件：編輯器實(shí)例掂咒、文檔實(shí)例才沧、代碼行、文本范圍绍刮。

2.4 keymap(鍵盤映射)

    鍵映射是將鍵和鼠標(biāo)按鈕與功能相關(guān)聯(lián)的方式.鍵映射是一個(gè)映射字符串的對象温圆，它將按鈕標(biāo)識為實(shí)現(xiàn)其功能的函數(shù)。帶有Emacs孩革，Vim和Sublime Text-style鍵盤映射岁歉。可以使用extraKey配置或command API自定義。

2.5 command(命令)

    命令是可以在編輯器上執(zhí)行的無參數(shù)操作锅移。他們主要用于鍵綁定熔掺。庫本身定義了許多常用命令，其中大多數(shù)命令由默認(rèn)的鍵綁定使用

定義命令：CodeMirror.commands非剃，執(zhí)行命令： execCommand置逻。

2.6 自定義樣式

    CodeMirror的外觀可以通過修改css文件實(shí)現(xiàn)。mode提供的css文件只是為該模式提供顏色备绽。編輯器本身的樣式通過改變或覆蓋 codemirror.css的實(shí)現(xiàn)

codemirror提供了必須定義的css類名券坞，css文件必須包括這些類名才能保證編輯器的正常工作，主題也是css文件肺素，定義了各種語法元素的顏色 查看 /theme 目錄恨锚。

2.7 API

    許多CodeMirror功能只能通過其API訪問。因此倍靡，如果您想將其公開給用戶猴伶，則需要編寫代碼（或使用插件）。包括內(nèi)容操作塌西，光標(biāo)和選擇他挎，配置，文件管理等方法捡需。每個(gè)編輯器都與其文檔CodeMirror.Doc的一個(gè)實(shí)例相關(guān)聯(lián)雇盖，一個(gè)文檔代表編輯器的內(nèi)容，外加一個(gè)選擇栖忠，一個(gè)撤消歷史和一個(gè)模式，一個(gè)文檔一次只能與一個(gè)編輯器關(guān)聯(lián)贸街，文檔實(shí)例擁有歷史操作庵寞、文本標(biāo)記、工具薛匪、大小捐川，滾動(dòng)和定位、模式逸尖，狀態(tài)和令牌相關(guān)的方法古沥。

2.8 addon(插件)

   插件目錄包含許多可重用的組件，這些組件實(shí)現(xiàn)了額外的編輯器功能娇跟，例如代碼提示岩齿，代碼補(bǔ)全，搜索和替換

2.9 編寫mode

  mode最簡單的定義了一個(gè)詞法解析器苞俘，解析編輯器的內(nèi)容盹沈，更高級的模式也可以處理語言的縮進(jìn)。(相當(dāng)于寫一個(gè)語法解析器吃谣，比較復(fù)雜乞封，不具體描述)

2.10

功能表

image.png

codemirror通過插件實(shí)現(xiàn)了一些特別的功能做裙，例如：

image.png

2.11 附錄

• 官網(wǎng)：<u>http://codemirror.net/</u>
• github(star:13k issue:200): <u>https://github.com/codemirror/CodeMirror/</u>
• 外部插件: <u>https://github.com/codemirror/CodeMirror/wiki/CodeMirror-addons</u>
• 編寫mode: <u>http://codemirror.net/doc/manual.html#modeapi</u>
• demo: <u>http://codemirror.net/demo/</u>
• 論壇：<u>https://discuss.codemirror.net/</u>
• 用戶(Adobe Brackets,Chrome DevTools,Firefox Developer Tools): <u>http://codemirror.net/doc/realworld.html</u>

2.12 評價(jià)：

image.png

3. ACE

Ace是一個(gè)用JavaScript編寫的嵌入式代碼編輯器。它與Sublime肃晚，Vim和TextMate等原生編輯器的功能和性能相匹配锚贱。它可以很容易地嵌入到任何網(wǎng)頁和JavaScript應(yīng)用程序中。作為與codemirror同類的現(xiàn)代編輯器关串，ACE同樣擁有mode進(jìn)行語法解析拧廊，實(shí)現(xiàn)編輯器的智能感知型功能。

image.png

架構(gòu)：

image.png

Ace也實(shí)現(xiàn)了編輯器和代碼文檔的分離悍缠，Session管理代碼的編輯狀態(tài)卦绣，Document為代碼容器，TextMode提供語言解析飞蚓，為代碼高亮和智能編輯提供支持滤港，Editor為編輯器的核心，它處理代碼的狀態(tài)趴拧，處理IO事件溅漾，渲染編輯器組件。

3.1 使用

image.png

通過ace.edit直接創(chuàng)建著榴，通過api設(shè)置編輯器

image.png

Ace只需引入一個(gè)文件添履，跟codemirror的核心包差不多大小(400k左右)，但已經(jīng)集成了豐富的特性脑又，包括主題設(shè)置暮胧，語言設(shè)置，編輯內(nèi)容和狀態(tài)的操作问麸，搜索替換往衷，事件監(jiān)聽處理，快捷鍵與命令等功能严卖。

3.2 API

Ace主要分為Editor席舍、Session、Document哮笆、Mode来颤、VirtualRenderer五個(gè)模塊，針對五個(gè)模塊都有對應(yīng)的API進(jìn)行操作稠肘。通常用戶使用較多的是Session類的API福铅，涉及對編輯狀態(tài)的獲取和修改，如光標(biāo)项阴、選擇本讥、代碼行、代碼搜索等類的API方法都較為豐富。

3.3 自定義Mode

Ace提供了非常詳細(xì)完整的文檔描述如何自定義一個(gè)語法高亮的模塊擴(kuò)展拷沸，其中包括編寫mode(語法解析)色查、高亮規(guī)則、代碼流的狀態(tài)機(jī)撞芍、mode繼承等秧了，并提供了一個(gè)可在線預(yù)覽的編輯環(huán)境。

3.4 附錄

官網(wǎng)： <u>https://ace.c9.io/</u>

github: <u>https://github.com/ajaxorg/ace</u> star:16k issue:580

編寫mode: <u>https://ace.c9.io/tool/mode_creator.html</u>

demo: <u>https://ace.c9.io/build/kitchen-sink.html</u>

社區(qū)：https://groups.google.com/forum/#!forum/ace-discuss

用戶: <u>https://ace.c9.io/#nav=production</u>

3.5 評價(jià)

image.png

4. monaco editor

image.png

monaco是VS Code的代碼編輯器序无，同時(shí)也是一個(gè)開源代碼編輯器验毡，可以嵌入到Web應(yīng)用程序中。

4.1 創(chuàng)建

[圖片上傳中...(image-9be8b0-1566646220272-0)]

monaco的引入需要預(yù)先加載loader帝嗡，該loader相當(dāng)于一個(gè)AMD的加載器把monaco的模塊和依賴加載進(jìn)來晶通，然后通過全局的monaco變量創(chuàng)建編輯器實(shí)例哟玷。這種引入方法對于打包可能會造成不小的麻煩，社區(qū)也有issue(https://github.com/Microsoft/monaco-editor/issues/18 )關(guān)于如何解決monaco在webpack中的加載谦絮。

4.2 API

monaco實(shí)現(xiàn)了vscode的編輯器，功能完備且集成度高祭椰，可以說即插即用钉赁，非常適合僅需編輯功能不考慮擴(kuò)展和自定義樣式的場景带膜。

image.png

API主要分為editor和language滑废，涉及編輯器的操作使用editor提供的API辛馆，language主要進(jìn)行代碼程序語言的擴(kuò)展。

4.3 自定義語法

monaco有一個(gè)專門的庫Monarch定義語法高亮硕蛹，包括language(語言定義)，token(語法標(biāo)記)乙濒，state(狀態(tài)機(jī))，rules(輸入規(guī)則)等語言解析的模塊卵蛉，其中可以通過json文件直接定義語言颁股，不用像另外兩種編輯器那樣編寫程序。同樣也支持語法的繼承傻丝。支持高級功能如復(fù)雜的大括號匹配甘有，語言定義的更多屬性，復(fù)雜的動(dòng)態(tài)結(jié)束標(biāo)簽葡缰。與Ace一樣提供在線的語法定義的編輯預(yù)覽亏掀。

image.png

4.4 評價(jià)

image.png

5. 總結(jié)

功能點(diǎn)的對比

image.png

功能的整體對比來看忱反，CodeMirror的功能比較多，但三者相差不大滤愕，基本功能都具備温算，只是某些特殊功能codemirror可以通過其豐富的擴(kuò)展實(shí)現(xiàn)。

綜合對比

image.png

image.png

綜合以上對比该互，可以對三款編輯器做出初步評價(jià)米者，三款功能基本完備，CodeMirror適合支持?jǐn)U展性要求高的定制型編輯器宇智，但其多文件的引入方式帶來一定的管理不方便以及瀏覽器端的網(wǎng)絡(luò)性能影響蔓搞。Ace綜合能力突出，適應(yīng)現(xiàn)代的前端開發(fā)能力随橘，基本上手簡單喂分，擴(kuò)展也較為豐富，適合在瀏覽器端的網(wǎng)頁中嵌入机蔗。monaco集成度最高蒲祈，引入文件量巨大，引入方式兼容性不太好萝嘁，但功能實(shí)現(xiàn)完備梆掸，不需另外的擴(kuò)展引入，適合需要實(shí)現(xiàn)復(fù)雜功能但不進(jìn)行深度擴(kuò)展的應(yīng)用牙言，因其不支持mobile且文件量大酸钦，在electron這類的客戶端環(huán)境使用較為合適。

附：

三款編輯器的vue組件封裝和擴(kuò)展：

codemirror：

Vue-Codemirror: Codemirror component for Vue.

<u>https://github.com/surmon-china/vue-codemirror</u>

Vue-Codemirror-Lite: Lightweight Codemirror Component for Vue.js

<u>https://github.com/cnu4/vue-codemirror-lite</u>

monaco：

vue-monaco-editor: Monaco Editor Vue Component

<u>https://github.com/matt-oconnell/vue-monaco-editor</u>

monaco-vue: Vue language plugin for the Monaco Editor.

<u>https://github.com/rebornix/monaco-vue/blob/master/test/index.html</u>

Ace：

vue2-ace-editor:A packaging of ace

<u>https://github.com/chairuosen/vue2-ace-editor</u>

from 基于JavaScript的代碼編輯器的比較和選型