Vue 中引用 ace-editor

最新推荐文章于 2025-05-29 23:37:24 发布

bluthly

最新推荐文章于 2025-05-29 23:37:24 发布

阅读量9.6k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/bluthly/article/details/84345661

Vue 专栏收录该内容

1 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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