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

最新推荐文章于 2024-07-23 03:01:39 发布

加蓓努力我先飞

最新推荐文章于 2024-07-23 03:01:39 发布

阅读量1.1k

点赞数

分类专栏：前端开发文章标签： vue.js 编辑器前端

本文链接：https://blog.csdn.net/ingenuou_/article/details/132025629

版权

前端开发专栏收录该内容

93 篇文章 4 订阅

订阅专栏

本文展示了如何在Vue项目中安装和使用vue2-ace-editor组件，通过npm安装后，在main.js全局引入并注册，然后在组件内局部引入。编辑器配置了语言工具、自动完成选项，并设置了样式。同时，定义了方法处理代码变化和初始化事件。

摘要由CSDN通过智能技术生成

在这里插入图片描述

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;
}

.ace_content {
  line-height: 20px;
  font-size: 12px;
  color: pink;
}
</style>