vue2-ace-editor代碼編輯器使用

安裝

npm安裝

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

  如果需要拷貝到內網，需要 npm安裝后 將 vue2-ace-editor 和 brace（ vue2-ace-editor中用到了brace ）  兩個依賴拷貝到項目 node_modules中；

使用

<template>
  <div class="container">
    <editor
      ref="aceEditor"
      v-model="content"
      @init="editorInit"
      width="700"
      height="600"
      lang="javascript"
      :theme="theme"
      :options="{
    　　 enableBasicAutocompletion: true,
    　　 enableSnippets: true,
    　　 enableLiveAutocompletion: true,
  　　   tabSize:6,
    　　 fontSize:14,
    　　 showPrintMargin:false,   //去除編輯器里的豎線
      }"
    ></editor>
    <el-button type="primary" size="small" @click="getValue">獲 取</el-button>
    <el-button type="primary" size="small" @click="pre">上一個主題</el-button>
    <el-button type="primary" size="small" @click="next">下一個主題</el-button>
  </div>
</template>

 

export default {
  data() {
    return {
      content: "",
      theme:'',
      num:0,
      arr:[ //將brace/theme文件夾下的所有主題名字拷貝出來
        'ambiance',
        'chaos',
        'chrome',
        'clouds',
        'clouds_midnight',
        'cobalt',
        'crimson_editor',
        'dawn',
        'dracula',
        'dreamweaver',
        'eclipse',
        'github',
        'gob',
        'gruvbox',
        'idle_fingers',
        'iplastic',
        'katzenmilch',
        'kr_theme',
        'kuroir',
        'merbivore',
        'merbivore_soft',
        'monokai',
        'mono_industrial',
        'pastel_on_dark',
        'solarized_dark',
        'solarized_light',
        'sqlserver',
        'terminal',
        'textmate',
        'tomorrow',
        'tomorrow_night',
        'tomorrow_night_blue',
        'tomorrow_night_bright',
        'tomorrow_night_eighties',
        'twilight',
        'vibrant_ink',
        'xcode',
      ]
    };
  },
  components: {
    editor: require("vue2-ace-editor")
  },
  methods: {
    editorInit() {//初始化
      require("brace/ext/language_tools"); //language extension prerequsite...
      require("brace/mode/javascript"); //language
      // require("brace/theme/tomorrow_night");
      for (let i = 0; i < this.arr.length; i++) {//方便看哪個主題好看，循壞加載了所有主題，通過點擊按鈕切換
        require("brace/theme/"+this.arr[i])
      }
      require("brace/snippets/javascript"); //snippet
    },
    getValue(){//獲取編輯器中的值
      console.log('編輯器中的值：'+this.$refs.aceEditor.editor.getValue())
      console.log('編輯器中第一個換行符的位置：'+this.$refs.aceEditor.editor.getValue().indexOf('\n'))
    },
    pre(){//切換到上一個主題
      if(this.num==0){
        return
      }
      this.num--
      this.theme = this.arr[this.num]
      console.log('主題'+this.num+'__'+this.arr[this.num])
    },
    next(){//切換到下一個主題
      if(this.num==this.arr.length-1){
        return
      }
      this.num++
      this.theme = this.arr[this.num]
      console.log('主題'+this.num+'__'+this.arr[this.num])
    },
  },
  mounted() {
    this.editorInit();
    this.theme = this.arr[0]
    console.log(this.$refs.aceEditor.editor.setValue('設置的初始值'))
  }
};

 

 

 

 初始化的效果：

 

有代碼的效果：

 

參考文檔

ace-editor中文文檔

如何批量提取一個文件夾內的所有文件名