Vue 项目中使用 Ace 编辑器的问题总结

添加 Ace

此处我们使用 npm 进行安装，在项目路径下，输入 npm install ace-builds，安装完成后，可以看到 ace 的 src 包。

Ace 配置属性

Ace配置属性文档：https://github.com/ajaxorg/ace/wiki/Configuring-Ace，提供了编辑器支持的属性。

Ace 的使用

首先，根据自己需要，导入相应的文件，

import ace from "ace-builds"
//在 webpack 环境中使用必须要导入
import "ace-builds/webpack-resolver"
// 导入语法模式        
import "ace-builds/src-noconflict/mode-javascript"
// 导入主题
import "ace-builds/src-noconflict/theme-monokai"
// 导入提示
import "ace-builds/src-noconflict/snippets/javascript"
import "ace-builds/src-noconflict/ext-language_tools"

接着，在页面中添加编辑器，

<div class="editorArea">
    <div class="codeEditor" ref="aceEditor">
        console.log(1 + 1);
    </div>
</div>

接着，配置编辑器，

this.aceEditor = ace.edit(this.$refs.aceEditor as string, {
    // 主题
    theme: "ace/theme/monokai",
    // 语言模式
    mode: "ace/mode/javascript",
    // 字号
    fontSize: 14,
    // 激活自动提示
    enableSnippets: true,
    enableLiveAutocompletion: true,
    enableBasicAutocompletion: true,
});

效果如下：

其它配置，未完待续！