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博客

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/855927.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Stable Diffusion 原理说明(好文推荐)

知乎-万字长文 https://zhuanlan.zhihu.com/p/669570827 腾讯云-动机说明 03&#xff1a;一文搞懂stable diffusion扩散去噪原理&#xff0c;玩转AI绘画-腾讯云开发者社区-腾讯云 百度安全验证

快速定制新人入职,可以自动回答知识库问题的机器人 | Chatopera

定制智能对话机器人&#xff0c;比如我是 HR&#xff0c;想要做一个聊天机器人&#xff0c;帮助新人入职&#xff0c;自动回答知识库的问题。 注册 Chatopera 云服务 首先&#xff0c;您需要一个 Chatopera 云服务账户&#xff0c;然后根据下面四个步骤实现。 服务注册地址&…

UnityAPI学习之碰撞检测与触发检测

碰撞检测 发生碰撞检测的前提&#xff1a; 1. 碰撞的物体需要有Rigidbody组件和boxcllidder组件 2. 被碰撞的物体需要有boxcollider组件 示例1&#xff1a;被碰撞的物体拥有Rigidbody组件 两个物体会因为都具有刚体的组件而发生力的作用&#xff0c;如下图所示&#xff0c…

Solus Linux: 有自己的软件包管理器

Solus Linux 是一个独立的 Linux 发行版&#xff0c;它以简单易用和现代化的用户体验而著称。Solus Linux 使用的包管理器是 eopkg&#xff0c;它具有以下优势和特点&#xff1a; 用户友好的界面&#xff1a;eopkg 提供了一个简洁直观的命令行界面&#xff0c;使得用户可以轻松…

创建一个electron桌面备忘录

Sound Of Silence 1.创建electron项目命令&#xff1a; npm create quick-start/electron my-new-project 2选择&#xff1a;√ Select a framework: vue √ Add TypeScript? ... No √ Add Electron updater plugin? ... Yes √ Enable Electron download mirror proxy? .…

hutool相关base64图片处理工具类

引入maven <dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId><version>5.7.4</version> </dependency>工具类 package com.db.common.utils.image;import cn.hutool.core.img.ImgUtil;import j…

【2024最新华为OD-C/D卷试题汇总】[支持在线评测] 身高差值排序(100分) - 三语言AC题解(Python/Java/Cpp)

&#x1f36d; 大家好这里是清隆学长 &#xff0c;一枚热爱算法的程序员 ✨ 本系列打算持续跟新华为OD-C/D卷的三语言AC题解 &#x1f4bb; ACM银牌&#x1f948;| 多次AK大厂笔试 &#xff5c; 编程一对一辅导 &#x1f44f; 感谢大家的订阅➕ 和 喜欢&#x1f497; &#x1f…

22种常用设计模式示例代码

文章目录 创建型模式结构型模式行为模式 仓库地址https://github.com/Xiamu-ssr/DesignPatternsPractice 参考教程 refactoringguru设计模式-目录 创建型模式 软件包复杂度流行度工厂方法factorymethod❄️⭐️⭐️⭐️抽象工厂abstractfactory❄️❄️⭐️⭐️⭐️生成器bui…

如何配置node.js环境

文章目录 step1. 下载node.js安装包step2. 创建node_global, node_cache文件夹step3.配置node环境变量step3. cmd窗口检查安装的node和npm版本号step4. 设置缓存路径\全局安装路径\下载镜像step5. 测试配置的nodejs环境 step1. 下载node.js安装包 下载地址&#xff1a;node.js…

[程序员] openstack: openvswitch: firewall丢包

最近看到一个老问题&#xff1a;说openvswitch提供的防火墙策略&#xff0c;会导致网络性能下降&#xff0c;而且有丢包。 https://bugzilla.redhat.com/show_bug.cgi?id1559604 the firewalling changed and the firewall_driver is now ‘openvswitch’ ([security_groups…

application/x-www-form-urlencoded和json的区别

application/x-www-form-urlencoded 和 application/json 是两种不同的数据格式&#xff0c;常用于HTTP请求中传递数据。 它们各自的特点和使用场景如下&#xff1a; 1. application/x-www-form-urlencoded •特点&#xff1a;这是一种传统的表单提交时采用的编码类型&#x…

24年新版!这份Excel+Python飞速搞定数据分析手册,简直可以让Excel飞起来

前⾔ 微软在 UserVoice 上运营着⼀个反馈论坛&#xff0c;每个⼈都可以在这⾥提交新点⼦供他⼈投票。票数最⾼的功能请求是“将 Python 作为Excel 的⼀门脚本语⾔”&#xff0c;其得票数差不多是第⼆名的两倍。尽管⾃2015 年这个点⼦发布以来并没有什么实质性进展&#xff0c;…

Java基础学习-算术运算符-案例

目录 运算符&#xff1a; 表达式&#xff1a; 简单练习&#xff1a; 案例&#xff1a;拆分 数字运算注意点 隐式转换&#xff08;自动类型提升&#xff09;&#xff1a; 强制转换&#xff1a; 字符串操作&#xff1a; 字符&#xff1a; 运算符&#xff1a; 对字面量或…

交叉编译三方库时不生成动态库

交叉编译三方库时不生成动态库 在x86架构下交叉编译liblog4cpp库时&#xff0c;x86执行./configure && make 可以正常生成动态库&#xff0c;但是交叉编译时执行./configure --hostarm时只生成了.a的静态库&#xff0c;查看config.log,进一步发现“ checking if libto…

为数据安全护航,袋鼠云在数据分类分级上的探索实践

在大数据时代&#xff0c;数据具有多源异构的特性&#xff0c;且价值各异&#xff0c;企业需依据数据的重要性、价值指数等予以区分&#xff0c;以利采取不同的数据保护举措&#xff0c;避免数据泄露。故而&#xff0c;数据分类分级管理属于数据安全保护中极为重要的环节之一。…

Coco Test Engine:代码覆盖率分析的新时代

本文翻译自&#xff1a;Coco Test Engine – The New Era of Code Coverage Analysis 原文作者&#xff1a;Qt Group首席软件工程师Sbastien Fricker 审校&#xff1a;Felix Zhang 我们的Coco 7重大更新带来了一个长期以来备受期待的功能——测试数据生成&#xff08;即Coco …

springboot mybatis mysql新增后返回id(ai生成)

在Spring Boot项目中使用MyBatis和MySQL时&#xff0c;若想在插入数据后返回生成的ID&#xff0c;可以在Mapper接口的插入方法上使用Options注解&#xff0c;并设置useGeneratedKeys属性为true&#xff0c;同时指定keyProperty为实体类中对应ID的属性名。 以下是一个简单的示例…

对角线法则的由来

目录 一、前言 二、对角线法则 三、行列式的定义 1. 行列式的定义 2. (全)排列 3. 逆序数 四、由全排列逆序数 到 对角线法则规律 ​编辑 五、参考书目 一、前言 仅限于个人理解&#xff0c;对错没有查证。 二、对角线法则 提起对角线法则&#xff0c;我们更倾向于他是…

Rocky Linux 9.4 部署Zabbix 7.0

文章目录 Zabbix基本概念zabbix介绍zabbix特性zabbix结构 安装Zabbix主机名配置配置Zabbix-Server(1)禁用EPEL提供的Zabbix软件包(2)安装Zabbix Server、Web前端、Agent(3)创建初始数据库(4)Zabbix server配置数据库(5)为Zabbix前端配置PHP(6)启动Zabbix server和agent进程(7)放…