vue2-ace-editor_install vue2-ace-editor

vue2-ace-editor

Ace 是一个用 JavaScript 编写的可嵌入代码编辑器。它与 Sublime、Vim 和 TextMate 等原生编辑器的功能和性能相匹配。它可以很容易地嵌入到任何网页和 JavaScript 应用程序中。Ace 被维护为 Cloud9IDE 的主要编辑器，是 Mozilla Skywriter（Bespin）项目的继任者。

如何使用

安装

npm install --save-dev vue2-ace-editor
1

集成

terminals.vue

<template>
  <Editor v-model="data" :options="defaultOptions" @init="editorInit" lang="json" :theme="theme" width="100%" :height="100%" class="my-editor"></Editor>
</template>
<script>
import Editor from 'vue2-ace-editor'
export default {
  name: 'Terminals',
  props: {
    data: {
      type: null | undefined | String,
      required: true
    },
    isEdit: {
      type: Boolean,
      default: true
    }
  },
  components: { Editor },
  data() {
    return {
      theme: 'tomorrow_night',
      ed: null,
      defaultOptions: {
        fontSize: 14,
        showPrintMargin: false,
        showGutter: true,
        highlightActiveLine: true,
        enableEmmet: true,
        enableLiveAutocompletion: true,
        autoScrollEditorIntoView: true,
        enableSnippets: true,
        tabSize: 2,
        useWorker: false,
        vScrollBarAlwaysVisible: true,
        wrap: true,
      }
    }
  },
  mounted() {
    window.addEventListener("resize", this.$_handleResize);
    this.$once("hook:beforeDestroy", () => {
      window.removeEventListener("resize", this.$_handleResize);
    });
  },
  methods: {
    $_handleResize() {
      this.ed.resize()
    },
    editorInit(ed) {
      this.ed = ed
      require('brace/mode/json')
      require('brace/mode/xml')
      require('brace/theme/' + this.theme)
      require('brace/ext/language_tools') //language extension prerequsite...
      require('brace/snippets/json')
      require('brace/snippets/xml')
      if (!this.isEdit) {
        ed.setReadOnly(true)
      }
      ed.getSession().on('change', () => {
        this.$emit('change', ed.getValue())
      })
    }
  }
}
</script>
<style>
.ace_editor,
.ace_editor * {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Droid Sans Mono', 'Consolas',
    monospace !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

配置列表

以下是配置选项的列表。除非另有说明，否则选项值为布尔值。

• editor 选项

• renderer 选项

• mouseHandler 选项

• session 选项

• 扩展选项

  选项名	值类型	默认值	可选值	备注
  enableBasicAutocompletion	Boolean	-	-	启用基本自动完成
  enableLiveAutocompletion	Boolean	-	-	启用实时自动完成
  enableSnippets	Boolean	-	-	启用代码段
  enableEmmet	Boolean	-	-	启用 Emmet
  useElasticTabstops	Boolean	-	-	使用弹性制表位

方法

• 设置主题

editor.setTheme("ace/theme/twilight");
1

• 设置语言模式

editor.session.setMode("ace/mode/javascript");
1

• 设置和获取内容：

editor.setValue("the new text here"); // 或 session.setValue
editor.getValue(); // 或 session.getValue
1
2

• 获取选定的文本：

editor.session.getTextRange(editor.getSelectionRange());
1

• 在光标处插入：

editor.insert("Something cool");
1

• 获取当前光标所在的行和列：

editor.selection.getCursor();
1

• 转到某一行：

editor.gotoLine(lineNumber);
1

• 获取总行数：

editor.session.getLength();
1

• 设置默认标签大小：

editor.getSession().setTabSize(4);
1

• 使用软标签：

editor.getSession().setUseSoftTabs(true);
1

• 设置字体大小：

document.getElementById('editor').style.fontSize='12px';
1

• 切换自动换行：

editor.getSession().setUseWrapMode(true);
1

• 设置行高亮显示：

editor.setHighlightActiveLine(false);
1

• 设置打印边距可见性：

editor.setShowPrintMargin(false);
1

• 设置编辑器为只读：

editor.setReadOnly(true);  // false为可编辑
1

• 窗口自适应

editor.resize()
1

• 在代码中搜索
  以下选项可用于搜索参数：
  • needle: 要查找的字符串或正则表达式
  • backwards: 是否从当前光标所在的位置向后搜索。默认为“false”
  • wrap: 当搜索到达结尾时，是否将搜索返回到开头。默认为“false
  • caseSensitive: 搜索是否应该区分大小写。默认为“false”
  • wholeWord: 搜索是否只匹配整个单词。默认为“false”
  • range: 搜索匹配范围，要搜索整个文档则设置为空
  • regExp: 搜索是否为正则表达式。默认为“false”
  • start: 开始搜索的起始范围或光标位置
  • skipCurrent: 是否在搜索中包含当前行。默认为“false”

下面是一个如何在编辑器对象上设置搜索的示例：

editor.find('needle',{
  backwards: false,
  wrap: true,
  caseSensitive: true,
  wholeWord: false,
  regExp: false
});
editor.findNext();
editor.findPrevious();
1
2
3
4
5
6
7
8
9

这是执行替换的方法：

editor.find('foo');
editor.replace('bar');
1
2

这是全部替换：

editor.replaceAll('bar');
1

editor.replaceAll 使用前需要先调用 editor.find(‘needle’, …)

• 事件监听

onchange:

editor.getSession().on('change', callback);
1

selection变化:

editor.getSession().selection.on('changeSelection', callback);
1

cursor变化:

editor.getSession().selection.on('changeCursor', callback);
1

• 添加新的命令和绑定

将指定键绑定并分配给自定义功能：

editor.commands.addCommand({
    name: 'myCommand',
    bindKey: {win: 'Ctrl-M',  mac: 'Command-M'},
    exec: function(editor) {
        //...
    }
});
1
2
3
4
5
6
7

常见问题

光标错位问题修复：

.ace_editor,
.ace_editor * {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Droid Sans Mono', 'Consolas',
    monospace !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}
1
2
3
4
5
6
7
8