代码编辑器 vue ace editor 在vue中的使用

1.安装vue ace editor

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

2.引用

	// 1.在使用的vue页面进行引用
	import Editor from 'vue2-ace-editor'
	
	components: {
	   Editor
	},
	// 2.在main.js中引用
	import Editor from 'vue2-ace-editor'

	Vue.component('editor', Editor)

3.页面使用

<template>
	<editor ref="pyEditer" v-model="content" @init="editorInit" lang="python" theme="eclipse" width="100%" height="100%" :options="{
        enableBasicAutocompletion: true,
       enableSnippets: true,
       enableLiveAutocompletion: true,
       tabSize:2,
       fontSize:20,
       showPrintMargin:false, //去除编辑器里的竖线
      }"></editor>
</template>
<script>
import Editor from 'vue2-ace-editor'
export default {
  components: {
   Editor
  },
  data() {
    return {
      content: ''
    }
  },
  methods: {
    editorInit() {
      //初始化ace
      require("brace/ext/language_tools")
      require("brace/mode/python")
      require("brace/snippets/python")
      require("brace/theme/eclipse")
    }
  }

}
</script>

4.实例效果

5.主题切换

若需要改变editor的主题，则在nodemodules 里面找到brace-->theme,找到相应的主题，导入进来		替换掉就好

6.参考
vue2-ace-editor