vue3-ace-editor配置语法

最新推荐文章于 2025-04-11 16:07:02 发布

兜小糖的小秃毛

最新推荐文章于 2025-04-11 16:07:02 发布

阅读量7.2k

点赞数 4

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/Roy__Jason/article/details/125804095

版权

Vue 专栏收录该内容

24 篇文章

订阅专栏

本文详细介绍了如何在 Vue3 项目中集成并配置 ace-editor，包括设置语言、主题、自动补全等功能，并展示了具体的代码实现。通过引入 ace-builds 相关模块，实现了 SQL、JavaScript 等多种语言的支持，同时调整了编辑器的样式，如字体大小、缩进和光标颜色等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue3-ace-editor配置语法

<template>
  <v-ace-editor
    v-model:value="sqlContent"
    @init="editorInit"
    lang="javascript"
    :options="{
      enableBasicAutocompletion: true,
      enableSnippets: true,
      enableLiveAutocompletion: true,
      fontSize: 14,
      tabSize: 2,
      showPrintMargin: false,
      highlightActiveLine: true,
    }"
    theme="monokai"
    style="height: 400px; width: 400px; background: #000; color: #fff"
  >
  </v-ace-editor>
</template>

<script>
import {
  defineComponent,
  reactive,
  toRefs,
  ref,
  onMounted,
  nextTick,
} from "vue";
import * as ace from 'ace-builds';
ace.config.set('basePath', '/static/src-min-noconflict/');
import { VAceEditor } from "vue3-ace-editor";
export default defineComponent({
  name: "page-three",
  components: {
    VAceEditor,
  },
  setup() {
    const sqlContent = ref("");
    const state = reactive({
      test: "",
    });
    function editorInit() {
      require("ace-builds/src-noconflict/ext-language_tools");
      require("ace-builds/src-noconflict/snippets/sql");
      require("ace-builds/src-noconflict/mode-sql");
      require("ace-builds/src-noconflict/theme-monokai");
      require("ace-builds/src-noconflict/mode-html");
      require("ace-builds/src-noconflict/mode-html_elixir");
      require("ace-builds/src-noconflict/mode-html_ruby");
      require("ace-builds/src-noconflict/mode-javascript");
      require("ace-builds/src-noconflict/mode-python");
      require("ace-builds/src-noconflict/snippets/less");
      require("ace-builds/src-noconflict/theme-chrome");
      require("ace-builds/src-noconflict/ext-static_highlight");
      require("ace-builds/src-noconflict/ext-beautify");
    }
    onMounted(() => {
      nextTick(() => {
        editorInit;
      });
    });
    return {
      sqlContent,
      ...toRefs(state),
      editorInit,
    };
  },
});
</script>

<style>
/* 修改光标颜色 */
.ace_cursor {
  color: #fff !important;
}
</style>