線上程式碼編輯器選型

一、CodeMirror https://github.com/codemirror/CodeMirror

• 簡介

  CodeMirror 是一款“Online Source Editor”，基於Javascript，短小精悍，風格包括js, java, php, c++等等100多種語言。比較強大可以自行配置語言模式。能夠做到自動補全，程式碼摺疊，可配置鍵盤事件，vim， emacs， sublime text 風格、能完成查詢替換，括號匹配，分欄顯示，顯示行號，自行配置字型大小和風格，是許多大名鼎鼎的線上程式碼編輯器的基礎庫。

• 實踐

  lib 下是放的是核心庫和核心 css，mode 下放的是各種支援語言的語法定義，theme 目錄下是支援的主題樣式。一般在開發中，新增 lib 下的引用和 mode 下的引用就夠了。

  下面兩個是使用 Code Mirror 必須引入的：

  <link rel="stylesheet" href="./codemirror-5.58.3/lib/codemirror.css">
  <script src="./codemirror-5.58.3/lib/codemirror.js"></script>
  

  接下來要引用的就是在 mode 目錄下編輯器中要編輯的語言對應的 js 檔案，這裡以 javascript 為例：

  <!--程式碼高亮-->
  <script src="./codemirror-5.58.3/mode/javascript/javascript.js"></script>
  

  引用的檔案用於支援對應語言的語法高亮。

  不同的主題，只需按照如下引入即可：

  <!--引入css檔案，用以支援主題-->
  <link rel="stylesheet" href="./codemirror-5.58.3/theme/dracula.css"/>
  

  建立編輯器
  使用textarea標籤作為容器

  <textarea id="demotext"></textarea>
  

  在js中進行對之前引入的檔案進行配置配置

  var editor = CodeMirror.fromTextArea(document.getElementById("demotext"), {
          lineNumbers: true,
          mode: "javascript", // 語言
          theme: "dracula",	//設定主題
          //readOnly: true,        //只讀
      });
  

• 效果圖

  

• 總結

  通過以上配置可以快速生成一個簡潔的線上編輯器，也可以通過引入其他功能對應的js檔案進行豐富。總言而之是個小巧、靈活的線上編輯器庫！

• 參考連結

  https://blog.csdn.net/qq_37193537/article/details/88426196

---

二、Monaco Editor https://github.com/microsoft/monaco-editor

• 簡介

  Monaco Editor是為VS Code提供支援的程式碼編輯器，執行在瀏覽器環境中。編輯器提供程式碼提示，智慧建議等功能。供開發人員遠端更方便的編寫程式碼。移動瀏覽器或移動Web框架不支援Monaco編輯器。簡單的理解就是VSCode中的程式碼編輯器和Monaco Editor使用的很多相同的核心模組，你可以將Monaco Editor用到自己的專案中，作為雲端編輯器的支援，支援IE 11，Edge，Chrome，Firefox，Safari和Opera！

• 實踐

  為了編寫demo方便，我直接用的script直接引入的js檔案。
  官方也提供了不同情況下的demo，非常全。github連結

  下面放一些核心程式碼，更詳細的配置請參見官網。

      <!-- css檔案 -->
      <link
  		rel="stylesheet"
  		data-name="vs/editor/editor.main"
  		href="./package/min/vs/editor/editor.main.css"
      />
  

      <!-- js檔案 -->
      <script>
  		var require = { paths: { vs: './package/min/vs' } };
  	</script>
      <script src="./package/min/vs/loader.js"></script>
  	<script src="./package/min/vs/editor/editor.main.nls.js"></script>
  	<script src="./package/min/vs/editor/editor.main.js"></script>
      <div id="container" style="width: 800px; height: 600px; border: 1px solid grey"></div>
  	<script>
  		var editor = monaco.editor.create(document.getElementById('container'), {
  			value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
              language: 'javascript',
              theme: "vs-dark" // 主題
  		});
  	</script>
  

• 效果圖

  

• 總結

  由圖可見，功能十分齊全，基本上是vscode 線上版。

---