代码编辑器vue2-ace-edit

2021-12-28 17:35:18 阅读：265 来源： 互联网

标签：return ace language edit require callback vue2 brace

template部分

<template>
  <div class="codeEditBox" :style="{height: height + 'px'}">
    <editor
      ref="aceEditor"   
      v-model="options.value"   //初始化显示是内容
      @init="editorInit"        //初始化回调
      @input="codeChange"      //每次改变时的回调
      @setCompletions="setCompletions"  //添加自定义提示
      :lang="editorOptions.language"  //语言
      :options="editorOptions"    //编辑器配置
      theme="tomorrow_night_blue"  //编辑器风格
    ></editor>
  </div>
</template>

引入依赖

import Editor from 'vue2-ace-editor'
import ace from 'brace'

配置

export default {
  name: 'AceEditor',
  data() {
    return {
      defaultOpts: {
        value: '',
        language: 'sql',
        // 设置代码编辑器的样式
        enableBasicAutocompletion: true, //启用基本自动完成
        enableSnippets: true, // 启用代码段
        enableLiveAutocompletion: true, //启用实时自动完成
        tabSize: 2, //标签大小
        fontSize: 14, //设置字号
        showPrintMargin: false, //去除编辑器里的竖线
      },
      languageObj: {
        javascript: ['mode', 'snippets'],
        css: ['mode', 'snippets'],
        json: ['mode', 'snippets']
      }
    }
  },
  props: {
    options: {
      type: Object,
      default() {
        return {
          language: 'javascript'
        }
      }
    },
    height: {
      type: Number,
      default: 500
    }
  },
  components: {
    Editor
  },
  computed: {},
  watch: {},
  created() {
    this.editorOptions = Object.assign(this.defaultOpts, this.options)
  },
  mounted() {
  },
  methods: {
    codeChange(val) {
      this.$emit('change', val)
    },
    editorInit() {
      const that = this
      require('brace/ext/searchbox') //添加搜索功能
      require('brace/theme/tomorrow_night_blue') //添加风格
      require('brace/ext/language_tools') //language extension prerequsite...
      require('brace/mode/' + this.editorOptions.language)
      require('brace/snippets/' + this.editorOptions.language)
      //添加自定义提示
      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)
    },
    getVal() {
      return this.$refs.aceEditor.editor.getValue()
    },
    setCompleteData(editor, session, pos, prefix, callback) {
      const data = [
        {
          meta: '表名', // 描述
          caption: 'sonic', // 展示出的名字（一般与value值相同）
          value: 'sonic', // 数据值
          score: 1 // 权重 数值越大 提示越靠前
        },
        {
          meta: '库名',
          caption: 'sonww',
          value: 'sonww',
          score: 2
        }
      ]
      if (prefix.length === 0) {
        return callback(null, [])
      } else {
        return callback(null, data)
      }
    }
  }
}

参考：https://blog.51cto.com/u_15077560/3805230

未验证的api https://www.codenong.com/jsfb49c843a679/

搜索框问题解决

debug思路：

1. 当 ctrl+F 时，会报错找不到 Seach ，说明该组件是支持搜索功能的，但需要引入或者调用，于是可以打印该组件的实例，发现该组件有$seach 函数
2. 查看源码node_modules包里去找该函数源码

3. 发现功能是有的，但是需要引入，于是把它引入就可以用了

require('brace/ext/searchbox')

标签：return,ace,language,edit,require,callback,vue2,brace
来源： https://www.cnblogs.com/wxyblog/p/15741480.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

代码编辑器vue2-ace-edit