1.先在官网下载源码https://github.com/ajaxorg/ace,在本地运行一下命令

npm install
node ./Makefile.dryice.js

2.copy build文件夹到项目中

3.在vue的index.html里引用js

<script src="static/js/ace-editor/src/ace.js"></script>
<script src="static/js/ace-editor/src/ext-language_tools.js"></script>

4.在需要用ace-editor的控件里的mounted方法添加一下配置即可

mounted () {
  // eslint-disable-next-line
  editor = ace.edit('editor')
  editor.session.setMode('ace/mode/javascript') // 设置语言
  editor.setTheme('ace/theme/tomorrow')// 设置主题
  // enable autocompletion and snippets
  editor.setOptions({
    enableBasicAutocompletion: true,
    enableSnippets: true,
    enableLiveAutocompletion: true// 设置自动提示
  })
  // this.inputValue = editor.getValue() // 读值
  // editor.setValue(editorValue)
  /* eslint-enable no-alert, no-console */
}
Logo

瓜分20万奖金 获得内推名额 丰厚实物奖励 易参与易上手

更多推荐