vue2-ace-editor

vue2-ace-editor

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

如何使用

安装

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

集成

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>

配置列表

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

• editor 选项

选项名	值类型	默认值	可选值	功能
selectionStyle	String	text	line ｜ text	选中样式
highlightActiveLine	Boolean	true	-	高亮当前行
highlightSelectedWord	Boolean	true	-	高亮选中文本
readOnly	Boolean	false	-	是否只读
cursorStyle	String	ace	ace ｜ slim ｜ smooth ｜ wide	光标样式
mergeUndoDeltas	String ｜ Boolean	false	always	合并撤销
behavioursEnabled	Boolean	true	-	启用行为
wrapBehavioursEnabled	Boolean	true	-	启用换行
autoScrollEditorIntoView	Boolean	false	-	启用滚动
copyWithEmptySelection	Boolean	true	-	复制空格
useSoftTabs	Boolean	false	-	使用软标签
navigateWithinSoftTabs	Boolean	false	-	软标签跳转
enableMultiselect	Boolean	false	-	选中多处

• renderer 选项

选项名	值类型	默认值	可选值	功能
hScrollBarAlwaysVisible	Boolean	false	-	纵向滚动条始终可见
vScrollBarAlwaysVisible	Boolean	false	-	横向滚动条始终可见
highlightGutterLine	Boolean	true	-	高亮边线
animatedScroll	Boolean	false	-	滚动动画
showInvisibles	Boolean	false	-	显示不可见字符
showPrintMargin	Boolean	true	-	显示打印边距
printMarginColumn	Number	80	-	设置页边距
printMargin	Boolean ｜ Number	false	-	显示并设置页边距
fadeFoldWidgets	Boolean	false	-	淡入折叠部件
showFoldWidgets	Boolean	true	-	显示折叠部件
showLineNumbers	Boolean	true	-	显示行号
showGutter	Boolean	true	-	显示行号区域
displayIndentGuides	Boolean	true	-	显示参考线
fontSize	Number ｜ String	inherit	-	设置字号
fontFamily	String	inherit	-	设置字体
maxLines	Number	-	-	至多行数
minLines	Number	-	-	至少行数
scrollPastEnd	Boolean ｜ Number	0	-	滚动位置
fixedWidthGutter	Boolean	false	-	固定行号区域宽度
theme	String	-	-	主题引用路径，例如"ace/theme/textmate"

• mouseHandler 选项

选项名	值类型	默认值	可选值	备注
scrollSpeed	Number	-	-	滚动速度
dragDelay	Number	-	-	拖拽延时
dragEnabled	Boolean	true	-	是否启用拖动
focusTimout	Number	-	-	聚焦超时
tooltipFollowsMouse	Boolean	false	-	鼠标提示

• session 选项

选项名	值类型	默认值	可选值	备注
firstLineNumber	Number	1	-	起始行号
overwrite	Boolean	-	-	重做
newLineMode	String	auto	auto ｜ unix ｜ windows	新开行模式
useWorker	Boolean	-	-	使用辅助对象
useSoftTabs	Boolean	-	-	使用软标签
tabSize	Number	-	-	标签大小
wrap	Boolean	-	-	换行
foldStyle	String	-	markbegin ｜ markbeginend ｜ manual	折叠样式
mode	String	-	-	代码匹配模式，例如“ace/mode/text"

• 扩展选项

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

方法

• 设置主题

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

• 设置语言模式

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

• 设置和获取内容：

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

• 获取选定的文本：

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

• 在光标处插入：

editor.insert("Something cool");

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

editor.selection.getCursor();

• 转到某一行：

editor.gotoLine(lineNumber);

• 获取总行数：

editor.session.getLength();

• 设置默认标签大小：

editor.getSession().setTabSize(4);

• 使用软标签：

editor.getSession().setUseSoftTabs(true);

• 设置字体大小：

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

• 切换自动换行：

editor.getSession().setUseWrapMode(true);

• 设置行高亮显示：

editor.setHighlightActiveLine(false);

• 设置打印边距可见性：

editor.setShowPrintMargin(false);

• 设置编辑器为只读：

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

• 窗口自适应

editor.resize()

• 在代码中搜索
  以下选项可用于搜索参数：
  • 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();

这是执行替换的方法：

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

这是全部替换：

editor.replaceAll('bar');

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

• 事件监听

onchange:

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

selection变化:

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

cursor变化:

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

• 添加新的命令和绑定

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

editor.commands.addCommand({
    name: 'myCommand',
    bindKey: {win: 'Ctrl-M',  mac: 'Command-M'},
    exec: function(editor) {
        //...
    }
});

常见问题

光标错位问题修复：

.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;
}