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

1.首先通过运行安装：

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

2.然后再main里加入代码进行组件全局加载

import Editor from 'vue2-ace-editor'

Vue.component('editor', Editor)

如果不想全局加载也可以仅在自己需要的页面进行引入

import Editor from 'vue2-ace-editor'

components: {

Editor

}

以下是页面的editor组件相关的代码代码

 <editor
     height="650" 
     width="100%"
     ref="editor" 
     :content="content" 
     v-model="content"
     :options="{
       enableBasicAutocompletion: true,
       enableSnippets: true,
       enableLiveAutocompletion: true,
       tabSize:2,
       fontSize:20,
       showPrintMargin:false,   //去除编辑器里的竖线
     }"
        
     :lang="'java'"
     @init="editorInit">
 </editor>



data：{
    return{
        content:""
    }
}

methods: {
      editorInit() {
        require("brace/ext/language_tools");
        require("brace/mode/java");   
        require("brace/snippets/java");
        require("brace/theme/eclipse");
      },
}

这是我编辑器的一个大概样子

 

后端读写文件什么的有需要的话可以看看这个

https://blog.csdn.net/weixin_43569255/article/details/106230767