vue中使用代码编辑器 Ace editor

一、介绍

Ace是一个用JavaScript编写的可嵌入代码编辑器。它与Sublime，Vim和TextMate等本地编辑器的功能和性能相匹配。它可以轻松地嵌入任何网页和JavaScript应用程序中。

二、安装

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

三、引入插件

// 全局引入  main.js

import Editor from 'vue2-ace-editor';
Vue.use(Editor)

//组件中引入

import Editor from 'vue2-ace-editor';
components: {
  Editor,
},

四、使用示例

<template>
  <div class="codeEditBox">
    <editor
      v-model="code"
      @init="editorInit"
      @input='codeChange'
      lang="javascript"
      :options="editorOptions"
      theme="chrome"
    ></editor>
  </div>
</template>
<script>
import Editor from 'vue2-ace-editor';
export default {
  components: {
    Editor,
  },
  data() {
    return {
      code: '', 
      editorOptions: {
        // 设置代码编辑器的样式
        enableBasicAutocompletion: true, //启用基本自动完成
        enableSnippets: true, // 启用代码段
        enableLiveAutocompletion: true, //启用实时自动完成
        tabSize: 2, //标签大小
        fontSize: 18, //设置字号
        showPrintMargin: false, //去除编辑器里的竖线
      },
    };
  },
  methods: {
    codeChange(val){
       console.log(val);
    },
    editorInit() {
      require('brace/theme/chrome');
      require('brace/ext/language_tools'); //language extension prerequsite...
      require('brace/mode/yaml');
      require('brace/mode/json');
      require('brace/mode/less');
      require('brace/snippets/json');
      require('brace/mode/lua');
      require('brace/snippets/lua');
      require('brace/mode/javascript');
      require('brace/snippets/javascript');
    },
  },
};
</script>
<style scoped>
.codeEditBox{
    width:100%;
    height:200px;
    border:1px solid #dcdee2;
}
</style>

五、效果