vue3+ts 使用vue3-ace-editor实现Json编辑器

2024-06-19 20:12

本文主要是介绍vue3+ts 使用vue3-ace-editor实现Json编辑器,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

1、效果图

输入代码,点击格式化就出现以上效果,再点击压缩,是以下效果
2、安装

npm i vue3-ace-editor

3、使用

新建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-editorv-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, // 启用语法检查,必须为trueenableBasicAutocompletion: true, // 自动补全enableLiveAutocompletion: true, // 智能补全enableSnippets: true, // 启用代码段showPrintMargin: false, // 去掉灰色的线,printMarginColumnhighlightActiveLine: 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, (newValue) => {console.log('New Content:', newValue)emitter.emit('handleCondition', newValue)
})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>

参考:vue3-ace-editor使用记录-CSDN博客

这篇关于vue3+ts 使用vue3-ace-editor实现Json编辑器的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1076034

相关文章

Java中List的contains()方法的使用小结

《Java中List的contains()方法的使用小结》List的contains()方法用于检查列表中是否包含指定的元素,借助equals()方法进行判断,下面就来介绍Java中List的c... 目录详细展开1. 方法签名2. 工作原理3. 使用示例4. 注意事项总结结论:List 的 contain

C#使用SQLite进行大数据量高效处理的代码示例

《C#使用SQLite进行大数据量高效处理的代码示例》在软件开发中,高效处理大数据量是一个常见且具有挑战性的任务,SQLite因其零配置、嵌入式、跨平台的特性,成为许多开发者的首选数据库,本文将深入探... 目录前言准备工作数据实体核心技术批量插入:从乌龟到猎豹的蜕变分页查询:加载百万数据异步处理:拒绝界面

Android中Dialog的使用详解

《Android中Dialog的使用详解》Dialog(对话框)是Android中常用的UI组件,用于临时显示重要信息或获取用户输入,本文给大家介绍Android中Dialog的使用,感兴趣的朋友一起... 目录android中Dialog的使用详解1. 基本Dialog类型1.1 AlertDialog(

MySQL双主搭建+keepalived高可用的实现

《MySQL双主搭建+keepalived高可用的实现》本文主要介绍了MySQL双主搭建+keepalived高可用的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,... 目录一、测试环境准备二、主从搭建1.创建复制用户2.创建复制关系3.开启复制,确认复制是否成功4.同

Python使用自带的base64库进行base64编码和解码

《Python使用自带的base64库进行base64编码和解码》在Python中,处理数据的编码和解码是数据传输和存储中非常普遍的需求,其中,Base64是一种常用的编码方案,本文我将详细介绍如何使... 目录引言使用python的base64库进行编码和解码编码函数解码函数Base64编码的应用场景注意

Java实现文件图片的预览和下载功能

《Java实现文件图片的预览和下载功能》这篇文章主要为大家详细介绍了如何使用Java实现文件图片的预览和下载功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... Java实现文件(图片)的预览和下载 @ApiOperation("访问文件") @GetMapping("

使用Sentinel自定义返回和实现区分来源方式

《使用Sentinel自定义返回和实现区分来源方式》:本文主要介绍使用Sentinel自定义返回和实现区分来源方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Sentinel自定义返回和实现区分来源1. 自定义错误返回2. 实现区分来源总结Sentinel自定

Pandas使用SQLite3实战

《Pandas使用SQLite3实战》本文主要介绍了Pandas使用SQLite3实战,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学... 目录1 环境准备2 从 SQLite3VlfrWQzgt 读取数据到 DataFrame基础用法:读

JSON Web Token在登陆中的使用过程

《JSONWebToken在登陆中的使用过程》:本文主要介绍JSONWebToken在登陆中的使用过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录JWT 介绍微服务架构中的 JWT 使用结合微服务网关的 JWT 验证1. 用户登录,生成 JWT2. 自定义过滤

Java中StopWatch的使用示例详解

《Java中StopWatch的使用示例详解》stopWatch是org.springframework.util包下的一个工具类,使用它可直观的输出代码执行耗时,以及执行时间百分比,这篇文章主要介绍... 目录stopWatch 是org.springframework.util 包下的一个工具类,使用它