WEB端代码文本编辑器ACE的使用指南（附代码）

快速导航 一、ACE的介绍二、快速开始1. package.json引入ace-builds2. vue页面引入相应script3. 初始化ace编辑器4.展示效果 三、进阶使用1. 代码完成2. 填充值3. 清空值4. 获取选中文本5. 插入文本6. 获取总行数7. 获取当前光标所在行列8. 光标跳转到x行x列9. 编辑器只读10. 打开ace自带搜索框11. 打开ace自带替换框12. 更新编辑器语言13. 更新编辑器主题

一、ACE的介绍

Ace是一个用JavaScript编写的可嵌入代码编辑器。它与Sublime，Vim和TextMate等原生编辑器的功能和性能相匹配。它可以很容易地嵌入到任何网页和JavaScript应用程序中

ace官网github地址(ace: 项目源码)github地址(aceBuild: 构建后的代码，方便引入)vue3-ace-demo示例 二、快速开始 1. package.json引入ace-builds

  "dependencies": {
    "ace-builds": "^1.4.14"
  },

2. vue页面引入相应script

//ace-editor
import ace from 'ace-builds'
// ace主题
import 'ace-builds/src-noconflict/theme-kuroir'
// ace 文本格式,以json为例
import 'ace-builds/src-noconflict/mode-json5'
// import 'ace-builds/src-noconflict/mode-xml'
// import 'ace-builds/src-noconflict/mode-text'

3. 初始化ace编辑器

    //初始化ace编辑器
    this.editor = ace.edit(this.$refs.ace, {
      maxLines: 12, // 最大行数，超过会自动出现滚动条
      minLines: 5, // 最小行数，还未到最大行数时，编辑器会自动伸缩大小
      fontSize: 14, // 编辑器内字体大小
      theme: 'ace/theme/kuroir', // 默认设置的主题
      mode: 'ace/mode/json5', // 默认设置的语言模式
      tabSize: 4,// 制表符设置为 4 个空格大小
      readOnly: false //只读
    });

4.展示效果

三、进阶使用

推荐直接查看我的ace-vue-demo源码：github链接
核心代码示例
项目样式展示：

1. 代码完成

# 需提前引入
import 'ace-builds/src-min-noconflict/ext-language_tools'
      this.editor.setOptions({
        enableBasicAutocompletion: true, //启动基本自动完成
        enableLiveAutocompletion: true, //启动实时自动完成
      })

2. 填充值

 this.editor.setValue("hello world", -1)

3. 清空值

this.editor.setValue("")

4. 获取选中文本

this.editor.getSelectedText()

5. 插入文本

this.editor.insert("hello")

6. 获取总行数

this.editor.session.getLength()

7. 获取当前光标所在行列

this.editor.selection.getCursor();
# 返回格式为 {"row":0,"column":2}

8. 光标跳转到x行x列

 this.editor.gotoLine(1, 1);

9. 编辑器只读

this.editor.setReadOnly(true)

10. 打开ace自带搜索框

this.editor.execCommand('find');

11. 打开ace自带替换框

this.editor.execCommand('replace');

12. 更新编辑器语言

#需提前引入对应语言包，例如javascript
import 'ace-builds/src-min-noconflict/mode-javascript'
this.editor.setOption("mode", "ace/mode/javascript");

13. 更新编辑器主题

#需提前引入对应主题，例如kuroir
import 'ace-builds/src-min-noconflict/theme-kuroir'
this.editor.setTheme("ace/theme/kuroir");