Vue 3 + Element Plus + @vueup/vue-ace JSON 编辑器

Vue 3 + Element Plus + 局部引入 <VAceEditor> JSON 编辑器

下面是一个完整的 单文件组件 示例，演示如何在 Vue 3 中局部引入并使用 <VAceEditor>，结合 Element Plus 按钮控制显示、只读模式、双向绑定、按需渲染等功能。

组件代码（JsonEditor.vue）

<template>
  <div class="container">
    <!-- 切换编辑器显示按钮 -->
    <el-button @click="toggleEditor" type="primary">
      {{ jsonFlag ? '隐藏编辑器' : '显示编辑器' }}
    </el-button>

    <!-- 按需渲染的 JSON 编辑器 -->
    <VAceEditor
      v-if="jsonFlag"
      ref="aceRef"
      v-model:value="jsonContent"
      class="editor-content"
      placeholder="请输入 JSON 内容"
      :options="aceOptions"
      lang="json"
      theme="github"
      readonly
    />
  </div>
</template>

<script setup>
import { ref, nextTick } from 'vue';
// 局部引入 VueAce 组件
import { VueAce as VAceEditor } from '@vueup/vue-ace';
// 引入主题和语言模式
import 'ace-builds/src-noconflict/theme-github.js';
import 'ace-builds/src-noconflict/mode-json.js';

const jsonFlag = ref(true);
const jsonContent = ref(`{
  "name": "VueAce",
  "version": "1.0.0",
  "features": [
    "syntax highlighting",
    "read-only mode",
    "lazy mount"
  ]
}`);
const aceRef = ref(null);

const aceOptions = ref({
  printMarginColumn: 30,        // 打印边距所在的列号，当 showPrintMargin 为 true 时显示该列的竖线
  displayIndentGuides: false,   // 是否显示缩进参考线，用于指示多级缩进层次
  useWorker: true,              // 是否启用 Web Worker 来进行语法检查和高亮，提高性能
  showPrintMargin: false,       // 是否显示打印边距线（printMarginColumn 所在位置的垂直线）
  useSoftTabs: true,            // 使用空格替代 Tab 字符，true 时按 Tab 键插入空格
  highlightActiveLine: true,    // 是否高亮当前活动行，便于定位光标所在行
  enableMultiselect: true,      // 启用多重选择/多光标功能，支持同时编辑多处文本
  readOnly: true,               // 只读模式，禁止用户修改编辑器内容
  wrap: true,                   // 自动换行，超出编辑器宽度的内容会在视图中换行显示
  showLineNumbers: false,       // 是否显示行号区域，false 时不显示行号
  showGutter: false,            // 是否显示边距（行号 + 折叠标记）区域，false 时隐藏整个左侧边栏
})

function toggleEditor() {
  jsonFlag.value = !jsonFlag.value;
  if (jsonFlag.value) {
    nextTick(() => {
      aceRef.value?.editor.focus();
    });
  }
}
</script>

<style scoped>
.container {
  padding: 16px;
}

.editor-content {
  margin-top: 12px;
  height: 450px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}
</style>

安装依赖

npm install vue@next element-plus @vueup/vue-ace ace-builds --save

使用说明

1. 局部引入：在你的单文件组件中直接 import { VueAce as VAceEditor } from '@vueup/vue-ace'，无需在 main.js 中做全局注册。

2. 加载脚本：确保在组件顶部或项目入口加载了所需的主题和语言模式脚本：

   import 'ace-builds/src-noconflict/theme-github.js';
   import 'ace-builds/src-noconflict/mode-json.js';
   

3. 容器高度：外层容器需通过 CSS 明确指定高度，否则编辑器会因高度为 0 而隐藏。

4. 扩展功能：若需代码自动完成等高级特性，可额外加载：

   import 'ace-builds/src-noconflict/ext-language_tools.js';
   

   并在 aceOptions 中打开相应开关（如 enableBasicAutocompletion: true）。

完成以上配置后，即可在不做全局注册的前提下，快速在单文件组件中集成并使用 <VAceEditor>，轻松实现 JSON 高亮、只读、按需挂载等功能。