vue2-ace-editor基础配置

简介

Ace 是一个用 JavaScript 编写的可嵌入代码编辑器。它与 Sublime、Vim 和 TextMate

等原生编辑器的功能和性能相匹配。它可以很容易地嵌入到任何网页和 JavaScript 应用程序中。Ace 被维护为Cloud9IDE的主要编辑器 ，并且是 Mozilla Skywriter (Bespin) 项目的继承者。
快速开始
可以使用ace-builds 自行封装组件
也可以直接使用vue2-ace-editor ，按照步骤集成即可
安装
vue搭建省略…
npm install --save-dev vue2-ace-editor
集成
App.vue

<template>
  <div id="app">
    <el-card>
      <p>{{type[0]}}</p>
      <AceJavascripttest  :height=500 :value=value :theme=theme :readOnly=false></AceJavascripttest>
    </el-card>
  </div>
</template>
<script>
import AceJavascripttest from './components/AceJavascripttest'
export default {
  name: 'App',
  components:{
    AceJavascripttest,
  },
  data() {
    return {
      type: [
        '方法一：javascript在线编辑',
      ],
      value:'function(parm){}',
      theme:'tomorrow_night_blue'


    }
  }
}
</script>

AceJavascripttest.vue

<template>
  <div class="codeEditBox" :style="{height: height + 'px'}">
  <aceEditor ref="editor"
       :value="value"
       :lang="options.lang"
       :theme="theme"
       :options="options"
       @init="initEditor"
       v-bind="config">
  </aceEditor>
</div>
</template>


<script>
//引入vue2-ace-editor
import aceEditor from 'vue2-ace-editor'
//引入ace 后续修改自定义标签用到
import ace from 'brace'
//代码提示
import 'brace/ext/language_tools'
import 'brace/mode/javascript'
import 'brace/snippets/javascript'
//搜索
import 'brace/ext/searchbox'
//主题
//白底色 带高亮
import 'brace/theme/chrome'
//白底色黑字  不带高亮
import 'brace/theme/github'
//黑底色
import 'brace/theme/tomorrow_night_eighties'
//蓝底色
import 'brace/theme/tomorrow_night_blue'
//黑底色
import 'brace/theme/vibrant_ink'
export default {
  name: 'Editor',
  components: {
    aceEditor
  },
  props: {
    value: {
      type: String,
      default: ''
    },
    height: {
      type: Number,
      default: 300
    },
    readOnly: {
      type: Boolean,
      default: false
    },
    theme: {
      type: String,
      default: 'chrome'
    },
    config: {
      type: Object,
      default: () => {
        return {
          fontSize: 16
        }
      }
    }
  },
  computed: {
    options() {
      return {
        lang:'javascript',//语言
        enableBasicAutocompletion: true,//启动代码补全功能
        enableSnippets: true,//启动代码段
        showPrintMargin: false,//显示打印边距
        fontSize: this.config.fontSize,//字体大小
        enableLiveAutocompletion: true,//启用实时自动完成
        readOnly: this.readOnly//只读
      }
    }
  },
  methods: {
    initEditor(editor) {
      //自定义标签
      const that = this
          const completer = {
              getCompletions: function (editors, session, pos, prefix, callback) {
                  that.setCompleteData(editors, session, pos, prefix, callback)
              }
          }
          const lnTools = ace.acequire('ace/ext/language_tools')
          lnTools.addCompleter(completer)
      // 监听值的变化
      editor.getSession().on('change', () => {
        this.$emit('change', editor.getValue())
      })
    },
    getValue() {//获取值
      return this.$refs.editor.editor.getValue()
    },
    setValue(value) {//赋值
      this.$refs.editor.editor.session.setValue(value)
    },
    clear() {//清空
      this.$refs.editor.editor.session.setValue('')
    },
    setCompleteData (editor, session, pos, prefix, callback) {
                const data = [
                    {
                        meta: '方法名', // 描述
                        caption: 'get', // 展示出的名字（一般与value值相同）
                        value: 'function get(){}', // 数据值
                        score: 1 // 权重 数值越大 提示越靠前
                    },
                    {
                        meta: '方法名',
                        caption: 'set',
                        value: 'function set(){}',
                        score: 2
                    }
                ]
                if (prefix.length === 0) {
                    return callback(null, [])
                } else {
                    return callback(null, data)
                }
      }
  }
}
</script>

示例图

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

选项名 值类型 默认值 可选值 功能
selectionStyle String text line text
highlightActiveLine Boolean true - 高亮当前行
highlightSelectedWord Boolean true - 高亮选中文本
readOnly Boolean false - 是否只读
cursorStyle String ace ace slim
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 - 选中多处
选项名 值类型 默认值 可选值 功能
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"
选项名 值类型 默认值 可选值 备注
scrollSpeed Number - - 滚动速度
dragDelay Number - - 拖拽延时
dragEnabled Boolean true - 是否启用拖动
focusTimout Number - - 聚焦超时
tooltipFollowsMouse Boolean false - 鼠标提示
选项名 值类型 默认值 可选值 备注
firstLineNumber Number 1 - 起始行号
overwrite Boolean - - 重做
newLineMode String auto auto unix
useWorker Boolean - - 使用辅助对象
useSoftTabs Boolean - - 使用软标签
tabSize Number - - 标签大小
wrap Boolean - - 换行
foldStyle String - markbegin markbeginend
mode String - - 代码匹配模式，例如“ace/mode/text"
选项名 值类型 默认值 可选值 备注
enableBasicAutocompletion Boolean - - 启用基本自动完成
enableLiveAutocompletion Boolean - - 启用实时自动完成
enableSnippets Boolean - - 启用代码段
enableEmmet Boolean - - 启用Emmet
useElasticTabstops Boolean - - 使用弹性制表位
————————————————
版权声明：本文为CSDN博主「牛雪的小商店」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_42107690/article/details/130984181