退步青年

使用ace-builds

yarn add ace-builds

<template>
  <div>
    <div class="tool-btns">
      <a-space>
        <a-button type="default" icon="save"></a-button>
      </a-space>
    </div>
    <div id="codeEditor"></div>
  </div>
</template>

<script>
import ace from 'ace-builds'
import 'ace-builds/src-min-noconflict/theme-dracula'
import 'ace-builds/src-min-noconflict/mode-javascript'
import 'ace-builds/src-min-noconflict/ext-language_tools'
import 'ace-builds/src-min-noconflict/ext-error_marker'

ace.config.setModuleUrl('ace/mode/javascript_worker', require('file-loader?esModule=false!ace-builds/src-noconflict/worker-javascript.js'))
ace.config.setModuleUrl('ace/snippets/javascript', require('file-loader?esModule=false!ace-builds/src-noconflict/snippets/javascript.js'))

export default {
  data() {
    return {
      code: '',
    }
  },
  mounted() {
    this.editor = ace.edit('codeEditor')
    this.editor.setTheme('ace/theme/dracula')
    this.editor.getSession().setMode('ace/mode/javascript')
    this.editor.setOptions({
      enableBasicAutocompletion: true,
      enableSnippets: true,
      enableLiveAutocompletion: true,
    })
    this.editor.setValue(this.code)
    this.editor.on('change', () => {
      this.code = this.editor.getValue()
    })
  },
}
</script>

<style>
.tool-btns {
  background: #2c2d36;
  padding: 10px 0;
}
.tool-btns .ant-btn {
  background-color: transparent;
  color: #fff;
  border-color: #fff;
}
#codeEditor {
  width: 100%;
  height: calc(100vh - 120px);
}
</style>