Vue 中引用 ace-editor

最新推荐文章于 2025-10-25 10:17:35 发布

原创最新推荐文章于 2025-10-25 10:17:35 发布 · 9.6k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue ace-editor #vue ace #vue 中添加 ace-editor

Vue 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何在Vue项目中集成Ace Editor代码编辑器，包括从源码下载、本地运行、文件复制到项目中，再到在index.html中引入JS文件及在组件中进行配置的全过程。

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 */
}