ace-editor线上代码编辑器

Posted misterhe

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ace-editor线上代码编辑器相关的知识,希望对你有一定的参考价值。

package.json

{
"name": "vue-cli",
"version": "1.0.0",
"description": "A Vue.js project",
"author": "[email protected]",
"private": true,
"scripts": {
...
},
"dependencies": {
...
},
"devDependencies": {
...

"brace": "^0.11.0",
"emmet": "git+https://github.com/cloud9ide/emmet-core.git",
...
},
"engines": {
...
},
"browserslist": [
...
]
}

component文件夹——>editor.vue文件

<template>
  <div style="width: 100%;height: 330px"></div>
</template>

<script>
  require([‘emmet/emmet‘], function (data) {
    window.emmet = data.emmet
  });
const ace = require(‘brace‘);
export default {
  name: ‘editor‘,
  props: {
    value: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      editor: null,
      contentBackup: ‘‘
    }
  },
  watch: {
    value (val) {
      if (this.contentBackup !== val) {
        this.editor.setValue(val, 1)
      }
    },
    theme: function (newTheme) {
      this.editor.setTheme(‘ace/theme/‘ + newTheme)
    },
    lang: function (newLang) {
      this.editor.getSession().setMode(‘ace/mode/‘ + newLang)
    }
  },
  mounted () {
    let vm = this
    require(‘brace/ext/emmet‘)
    require(‘brace/ext/language_tools‘)
    let editor = vm.editor = ace.edit(this.$el)
    this.$emit(‘init‘, editor)
    let staticWordCompleter = {
      getCompletions: function (editor, session, pos, prefix, callback) {
        vm.$emit(‘setCompletions‘, editor, session, pos, prefix, callback)
      }
    }
    editor.completers = [staticWordCompleter]
    editor.setOptions({
      enableBasicAutocompletion: true,
      enableLiveAutocompletion: true
    })
    editor.$blockScrolling = Infinity
    editor.setFontSize(16)
    editor.setOption(‘enableEmmet‘, true)
    editor.getSession().setMode(‘ace/mode/mysql‘)
    editor.setTheme(‘ace/theme/xcode‘)
    editor.setValue(this.value, 1)
    editor.on(‘change‘, function () {
      let content = editor.getValue()
      vm.$emit(‘input‘, content)
      vm.contentBackup = content
    })
  }
}
</script>

<style scoped>
</style>

view文件夹的 你的页面文件

 

<editor v-model="formDynamic" @init="editorInit" @setCompletions="setCompletions"></editor>


methods:{
  editorInit(){
    require(‘brace/mode/mysql‘)
    require(‘brace/theme/xcode‘)
  },
  setCompletions (editor, session, pos, prefix, callback) {//自动提示方法
    callback(null, this.wordList.map(function (word) {
      return {
        caption: word.vl,
        value: word.vl,
        meta: word.meta
      }
    }))
  },
}

mounted(){
  if(!!configHighlight){//输入提示
    for (let i of configHighlight.split(‘|‘)) {
      this.wordList.push({‘vl‘: i, ‘meta‘: ‘关键字‘})
    }
  }
}

以上是关于ace-editor线上代码编辑器的主要内容,如果未能解决你的问题,请参考以下文章

添加到 ace-editor 明智的自动完成功能:列出用户定义的函数和变量(javascript 语言)

Ace-Editor JSON 自动格式/缩进

git回滚线上代码

git回滚线上代码

使用git 更新线上代码

visualstudio拉取线上代码