安装

npm install tq-ace-editor
// or
yarn tq-ace-editor

使用

局部引用

<template>
  <Editor />
</template>
<script>
  import Editor from 'tq-ace-editor'
  export default {
    components: { Editor }
  }
</script>

全局引入

// main.js
import Editor from 'tq-ace-editor'
Vue.component('Editor',Editor)

示例

<template>
  <Editor
    height="80vh"
    width="100%"
    ref="editor"
    v-model="content"
    :options="aceOption"
    lang="sh"
    @init="editorInit"
    theme="tomorrow_night_bright"/>
</template>
<script>
  import Editor from 'tq-ace-editor'
  export default {
    data() {
      return {
        content: '',
        aceOption: {
          enableBasicAutocompletion: true,
          enableSnippets: true,
          enableLiveAutocompletion: true,
          tabSize: 6,
          fontSize: 14
        }
      }
    },
    components: { Editor },
    methods: {
      editorInit() {
        require('brace/ext/language_tools')
        require('brace/mode/sh')
        require('brace/theme/tomorrow_night_bright')
        require('brace/snippets/sh')
      }
    }
  }
</script>

hook

名称 | 说明 | 类型 | 默认值 ------|-------|-------|------ init | 编辑器初始化钩子，当初始化完成后触发 | fn | -

属性

名称 | 说明 | 类型 | 默认值 ------|-------|-------|------ value | 编辑器内容 | String | - lang | 编辑器语言 | String | text theme | 编辑器主题名 | String | chrome height | 编辑器高度 | String | 100% width | 编辑器宽度 | String | 100% options | 编辑器配置项 | Object | {}

options 选项

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 | - | - | 使用弹性制表位

主题

使用主题的时候记得一定要先引主题再使用！require('brace/theme/主题名')

语言

使用主题的时候记得一定要先引主题再使用！require('brace/mode/语言名')

其他

要使用语言或者主题时，记得都要require一下相关的文件才能使用！记得切换npm仓库为私有仓库不然无法下载这个包！