vue中使用代码编辑器 Ace editor

ゝ一世哀愁。 2022-11-13 04:17 792阅读 0赞

**一、介绍**

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>

**五、效果**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDExMTg2NA_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDExMTg2NA_size_16_color_FFFFFF_t_70]: /images/20221022/e7414f23cbb54ecdb6b59b98a01ae434.png