我要评论1、效果图
输入代码，点击格式化就出现以上效果，再点击压缩，是以下效果
2、安装
npm i vue3-ace-editor3、使用
新建aceconfig.js文件
// ace配置，使用动态加载来避免第一次加载开销
import ace from 'ace-builds'
// 导入不同的主题模块，并设置对应 url
import themegithuburl from 'ace-builds/src-noconflict/theme-github?url'
ace.config.setmoduleurl('ace/theme/github', themegithuburl)
import themechromeurl from 'ace-builds/src-noconflict/theme-chrome?url'
ace.config.setmoduleurl('ace/theme/chrome', themechromeurl)
import thememonokaiurl from 'ace-builds/src-noconflict/theme-monokai?url'
ace.config.setmoduleurl('ace/theme/monokai', thememonokaiurl)
// 导入不同语言的语法模式模块，并设置对应 url (所有支持的主题和模式：node_modules/ace-builds/src-noconflict)
import modejsonurl from 'ace-builds/src-noconflict/mode-json?url'
ace.config.setmoduleurl('ace/mode/json', modejsonurl)
import modejavascripturl from 'ace-builds/src-noconflict/mode-javascript?url'
ace.config.setmoduleurl('ace/mode/javascript', modejavascripturl)
import modehtmlurl from 'ace-builds/src-noconflict/mode-html?url'
ace.config.setmoduleurl('ace/mode/html', modehtmlurl)
import modepythonurl from 'ace-builds/src-noconflict/mode-python?url'
ace.config.setmoduleurl('ace/mode/yaml', modepythonurl)
// 用于完成语法检查、代码提示、自动补全等代码编辑功能，必须注册模块 ace/mode/lang _ worker，并设置选项 useworker: true
import workerbaseurl from 'ace-builds/src-noconflict/worker-base?url'
ace.config.setmoduleurl('ace/mode/base', workerbaseurl)
import workerjsonurl from 'ace-builds/src-noconflict/worker-json?url' // for vite
ace.config.setmoduleurl('ace/mode/json_worker', workerjsonurl)
import workerjavascripturl from 'ace-builds/src-noconflict/worker-javascript?url'
ace.config.setmoduleurl('ace/mode/javascript_worker', workerjavascripturl)
import workerhtmlurl from 'ace-builds/src-noconflict/worker-html?url'
ace.config.setmoduleurl('ace/mode/html_worker', workerhtmlurl)
// 导入不同语言的代码片段，提供代码自动补全和代码块功能
import snippetsjsonurl from 'ace-builds/src-noconflict/snippets/json?url'
ace.config.setmoduleurl('ace/snippets/json', snippetsjsonurl)
import snippetsjsurl from 'ace-builds/src-noconflict/snippets/javascript?url'
ace.config.setmoduleurl('ace/snippets/javascript', snippetsjsurl)
import snippetshtmlurl from 'ace-builds/src-noconflict/snippets/html?url'
ace.config.setmoduleurl('ace/snippets/html', snippetshtmlurl)
import snippetspyhonturl from 'ace-builds/src-noconflict/snippets/python?url'
ace.config.setmoduleurl('ace/snippets/javascript', snippetspyhonturl)
// 启用自动补全等高级编辑支持，
import extsearchboxurl from 'ace-builds/src-noconflict/ext-searchbox?url'
ace.config.setmoduleurl('ace/ext/searchbox', extsearchboxurl)
// 启用自动补全等高级编辑支持
import 'ace-builds/src-noconflict/ext-language_tools'
ace.require('ace/ext/language_tools')
4、在页面使用
<template>
<div>
<div class="flex justify-between mb-2">
<el-tag color="#eff0ff" effect="light">json</el-tag>
<div>
<el-button color="#8769db" size="small" @click="jsonformat">{{ $t('format') }}</el-button>
<el-button size="small" @click="jsonnoformat">{{ $t('zip') }}</el-button>
</div>
</div>
<v-ace-editor
v-model:value="content"
lang="json"
theme="chrome"
:options="options"
class="w-full text-base pt-5"
:readonly="options.readonly"
/>
</div>
</template>
<script lang="ts" setup>
import { ref, reactive, watch } from 'vue'
import emitter from '@/utils/emitter'
import { vaceeditor } from 'vue3-ace-editor'
import './aceconfig.js'
const content = ref('') // 显示的内容
const options = reactive({
useworker: true, // 启用语法检查,必须为true
enablebasicautocompletion: true, // 自动补全
enableliveautocompletion: true, // 智能补全
enablesnippets: true, // 启用代码段
showprintmargin: false, // 去掉灰色的线，printmargincolumn
highlightactiveline: false, // 高亮行
highlightselectedword: true, // 高亮选中的字符
tabsize: 4, // tab锁进字符
fontsize: 14, // 设置字号
wrap: false, // 是否换行
readonly: false, // 是否可编辑
minlines: 1, // 最小行数，minlines和maxlines同时设置之后，可以不用给editor再设置高度
maxlines: 50, // 最大行数
})
// json格式化
const jsonformat = () => {
try {
content.value = json.stringify(json.parse(content.value), null, 2)
} catch (e) {
jsonerror(e)
}
}
// json压缩
const jsonnoformat = () => {
try {
content.value = json.stringify(json.parse(content.value))
} catch (e) {
jsonerror(e)
}
}
watch(
() => content.value,
(newcontent) => {
emitter.emit('handlecondition', newcontent)
},
{ deep: true, immediate: true },
)
const jsonerror = (e: any) => {
console.log(`json字符串错误：${e.message}`)
}
</script>
<style>
.ace_gutter {
background-color: transparent !important;
}
.ace-chrome .ace_gutter-active-line {
background-color: transparent !important;
}
</style>
发表评论