vue2-ace-editor代码编辑器使用

小半 • 2023年8月14日上午9:49 • 前端开发 • 阅读 885

安装

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('设置的初始值'))
  }
};