vue3-ace-editor前端 json格式化显示 json编辑器使用

原创

已于 2025-04-10 17:19:18 修改 · 5k 阅读

标签

#前端 #vue3 #json编辑器

收录于

于 2023-11-03 11:33:41 首次发布

本文介绍了如何在Vue3项目中使用vue3-ace-editor插件实现JSON数据的格式化和压缩功能，通过el-select选择主题并配合Vue的响应式特性来操作文本框中的JSON内容。

前端 json格式化显示 json编辑器使用vue3-ace-editor

1.安装
项目目录下打开终端运行

npm install vue3-ace-editor

2.使用

<template>
    <div class='content'>
        <el-select v-model="aceConfig.theme" class="m-2" placeholder="Select" size="large">
            <el-option v-for="item in aceConfig.arr" :key="item" :label="item" :value="item" />
        </el-select>
        <el-button @click="jsonFormat">格式化</el-button>
        <el-button @click="jsonNoFormat">压缩</el-button>
        <v-ace-editor v-model:value="dataForm.textareashow" @init="jsonFormat" lang="json" :theme="aceConfig.theme"
                      :options="aceConfig.options" :readonly="aceConfig.readOnly" style="height:300px;margin-top: 20px;" class="ace-editor" />
    </div>
</template>

<script setup>
import {
   
    reactive } from 'vue'
import {
   
    VAceEditor } from 'vue3-ace-editor';

//import "ace-builds/webpack-resolver";
// 加了这个【import "ace-builds/webpack-resolver";】可能会报错
//（若报错 则需要安装node.js的一个包 就是主题）
// 命令：npm install --save-dev file-loader

import 'ace-builds/src-noconflict/mode-json';
import