前言

開發人員一般是在電腦上面安裝了IDE完成日常的開發任務，因為專案業務需求，使用者想要線上寫JS指令碼，純粹的字串，很“費使用者”。那就需要一個線上JS編譯器，需要輕量級，好用，語法高亮，自動換行，語法提示燈功能。

Brace

  • 輕量
  • 自動提示
  • 語法高亮
  • 自動換行
  • 序號
  • 程式碼高亮
  • 自動縮排
  • 更換主題
  • 搜尋和替換支援正則表示式
  • 程式碼摺疊

老實說：就是因為monaco不好用才有這篇文章，現在一邊重新用brace替換monaco，一邊寫使用文件。為什麼要換，因為monaco太笨重了，我們使用場景很簡單，不深度。嚴重拖延了打包的速度，增加包體大小！但是不能否認monaco的強大，當初也是萬里挑一。

使用方法

  • 官網
[官方文件](https://ace.c9.io/#nav=howto)

[線上demo](https://ace.c9.io/build/kitchen-sink.html)

[github](https://github.com/ajaxorg/ace-builds/blob/master/editor.html)
  • 安裝
yarn add brace | npm install brace
  • 引入
var ace = require('brace')

require('brace/mode/javascript')

require('brace/theme/monokai')

require('brace/ext/language_tools') //很重要 自動補全 提示 必須要它
  • 初始化
init(script) {

  let self = this

  var editor = ace.edit('javascript-editor')

  editor.getSession().setMode('ace/mode/javascript') //語言

  editor.setOptions({

    // 預設:false

    wrap: true, // 換行

    autoScrollEditorIntoView: false, // 自動滾動編輯器檢視

    enableLiveAutocompletion: true, // 智慧補全

    enableBasicAutocompletion: true // 啟用基本完成 不推薦使用

  })

  if (script) {

    editor.setValue(script) //需要主動賦值

  } else editor.setValue(this.code)

  editor.getSession().on('change', function() {

    self.$emit('update:code', editor.getValue()) //js 編輯器作為元件 傳參給父元件

  })

 }
  • html
<template>

  <div id="javascript-editor"></div>

</template>
  • css
我是給這個編輯器設定了寬高 以及一些樣式的

  • 執行效果

  • api

require("lib/ace"); ##引入

editor.setTheme("ace/theme/solarized_dark");##設定模板；引入theme-solarized_dark.js模板檔案

editor.getSession().setMode("ace/mode/javascript"); ##設定程式語言模式

editor.setValue("the new text here");##設定內容

editor.getValue(); ##取值

editor.session.getTextRange(editor.getSelectionRange()); ##獲取選擇內容

editor.insert("Something cool"); ##在游標處插入

editor.selection.getCursor(); ##獲取游標所在行或列

editor.gotoLine(lineNumber); ##跳轉到行

editor.session.getLength(); ##獲取總行數

editor.getSession().setTabSize(4); ##設定預設製表符的大小

editor.getSession().setUseSoftTabs(true); ##使用軟標籤.

document.getElementById('editor').style.fontSize='12px';  ##設定字型大小

editor.getSession().setUseWrapMode(true); ##設定程式碼摺疊

editor.setHighlightActiveLine(false); ##設定高亮

editor.setShowPrintMargin(false); ##設定列印邊距可見度

editor.setReadOnly(true); ##設定編輯器只讀
  • 事件
editor.getSession().on('change', function(e) {

  // e.type, etc

});  //change 事件

editor.getSession().selection.on('changeSelection', function(e) {

});  //選擇事件

editor.getSession().selection.on('changeCursor', function(e) {

});  //游標移動事件

芳妮醬總結

基本滿足我的需求，再下一篇裡面打包速度比對，效能分析（主要與Monaca）

下一篇是monaco的使用教程以及與brace 比對