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.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>
参考:vue3-ace-editor使用记录-CSDN博客
相关文章:
vue3+ts 使用vue3-ace-editor实现Json编辑器
1、效果图 输入代码,点击格式化就出现以上效果,再点击压缩,是以下效果2、安装 npm i vue3-ace-editor 3、使用 新建aceConfig.js文件 // ace配置,使用动态加载来避免第一次加载开销 import ace from ace-builds// 导入不同的主…...
黑马HarmonyOS-NEXT星河版实战
"黑马HarmonyOS-NEXT星河版实战"课程旨在帮助学员深入了解HarmonyOS-NEXT星河版操作系统的开发和实际应用。学员将学习操作系统原理、应用开发技巧和界面设计,通过实战项目提升技能。课程注重实践与理论相结合,为学员提供全面的HarmonyOS开发经…...
PCL 三次样条插值(二维点)
一、简介 在插值计算中,最简单的分段多项式近似应该是分段线性插值,它由连接一组数据点组成,仅仅只需要将这些点一一用直线进行顺序相连即可。不过线性函数插值的缺点也很明显,就是在两个子区间变化的比较突兀,也就是没有可微性(不够光滑)。因此我们需要更为符合物理情况…...
HTTP/3 协议学习
前一篇: HTTP/2 协议学习-CSDN博客 HTTP/3 协议介绍 HTTP/3 是互联网上用于传输超文本的协议 HTTP 的第三个主要版本。它是 HTTP/2 的后继者,旨在进一步提高网络性能和安全性。HTTP/3 与前两个版本的主要区别在于它使用了一个完全不同的底层传输协议—…...
数据库-数据定义和操纵-DML语言的使用
为表的所有字段插入数据: INSERT INTO 表名 (字段名) VALUES (内容); 更新表中指定的内容: update语句三要素: 需要更新的表(table)名; 需要更新的字段(column)名和它的新内容(valu…...
BeanUtils.populate()的用法总结
BeanUtils.populate()的用法总结 大家好,我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编,也是冬天不穿秋裤,天冷也要风度的程序猿! 在Java中,BeanUtils.populate()是Apache Commons BeanUtils库提供…...
IDEA 学习之 热加载问题(Hot Swap)
目录 1. IDEA 自带热加载1.1. 热加载快捷键1.2. 热加载范围 1. IDEA 自带热加载 1.1. 热加载快捷键 系统快捷键WINCtrl F9MACOPTIOIN F9 1.2. 热加载范围 资源类型是否影响影响范围Java部分方法签名内...
计算机组成原理----指令系统课后习题
对应的知识点: 指令系统 扩展操作码的计算: 公式: 对扩展操作码而言,若地址长度为n,上一层留出m种状态,下一层可扩展出 mx2^n 种状态 1.设计某指令系统时,假设采用 16 位定长指令字格式&#…...
yolov8环境搭建+训练自己数据集
一、yolov8环境搭建 1. 安装miniconda环境 地址:https://mirrors.tuna.tsinghua.edu.cn/anaconda/miniconda 选择Python3.8版本 最好安装在C盘 勾选自动添加环境变量 ***以下操作安装过程中关闭代理软件 *** 2. 创建虚拟环境 conda create -n yolov8 python3…...
Eureka 学习笔记(1)
一 、contextInitialized() eureka-core里面,监听器的执行初始化的方法,是contextInitialized()方法,这个方法就是整个eureka-server启动初始化的一个入口。 Overridepublic void contextInitialized(ServletContextEvent event) {try {init…...
视觉新纪元:解码LED显示屏的视角、可视角、最佳视角的最终奥秘
在璀璨夺目的LED显示屏世界里,每一个绚烂画面的背后,都离不开三个关键概念:视角、可视角与最佳视角。这些术语不仅是衡量显示效果的重要标尺,也是连接观众与精彩内容的桥梁。让我们一起走进这场视觉盛宴,探索那些让LED…...
Benchmarking Panoptic Scene Graph Generation (PSG), ECCV‘22 场景图生成,利用PSG数据集
2080-ti显卡复现 源代码地址 Jingkang50/OpenPSG: Benchmarking Panoptic Scene Graph Generation (PSG), ECCV22 (github.com) 安装 pytorch 1.7版本 cuda10.1 按照readme的做法安装 我安装的过程如下图所示,这个截图是到了pip install openmim这一步 下一步 下一步 这一步…...
Linux 文件权限
优质博文:IT-BLOG-CN 一、使用者与群组的概念 【1】在Linux里面,任何一个文件都具有[User,Group及Other]三种身份的个别权限:不过需要注意的是root用户,具有所有权限。 ✔ User(文件拥有者):只有文件拥有者…...
IOS Swift 从入门到精通:算术运算,运算符重载,符合赋值运算,比较运算,条件,结合条件,三元运算,Swift语句,范围运算
目录 算术运算符 运算符重载 复合赋值运算符 比较运算符 条件 结合条件 三元运算符 Switch 语句 范围运算符 总结 算术运算符 现在您已经了解了 Swift 中的所有基本类型,我们可以开始使用运算符将它们组合在一起。运算符是那些像和 这样的小数学符号-&…...
Flutter开发环境搭建和调试
[你的Flutter文件夹路径]\flutter\bin 这样我们的Flutter SDK的环境变量就配置完毕了。接下来在命令提示符窗口中输入命令: flutter doctor 它可以帮助我们检查Flutter环境变量是否设置成功,Android SDK是否下载以及配置好环境变量等等。如果有相关的…...
【IC验证】UVM实验lab03
1. TLM端口的创建、例化与使用 创建: uvm_get_blocking_port #(fmt_trans) mon_bp_port; 例化: function new(string name "mcdf_refmod", uvm_component parent);super.new(name, parent);fmt_trans new("fmt_trans", this);…...
document.write()方法总结
document.write()方法总结 大家好,我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编,也是冬天不穿秋裤,天冷也要风度的程序猿!document.write()方法是JavaScript中用于向HTML文档写入内容的方法之一。它允许我们在…...
C#循环语句总结
前言 正所谓磨刀不误砍柴工,C#上位机软件开发能力的提升离不开对C#语法的精通,本文接着讲解C#语法知识中的循环语句,在C#程序开发中我们经常会用到各种循环语句,常见的有for循环、while循环,本文就是对C#中用到的各种…...
Spring-bean
Spring 网站:spring.io 两个方面: 简化开发: IoCAOP 框架整合: MyBatis SpringFrameWork系统架构(上层依赖下层) 解决问题(代码耦合度高——模块与模块之间的依赖程度) 目标&am…...
Linux常用命令(14)—查看文件内容(有相关截图)
写在前面: 最近在学习Linux命令,记录一下学习Linux常用命令的过程,方便以后复习。仅供参考,若有不当的地方,恳请指正。如果对你有帮助,欢迎点赞,关注,收藏,评论…...
Flask RESTful 示例
目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务 中文乱码问题: 下面创建一个简单的Flask RESTful API示例。首先,我们需要创建环境,安装必要的依赖,然后…...
DockerHub与私有镜像仓库在容器化中的应用与管理
哈喽,大家好,我是左手python! Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库,用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...
《从零掌握MIPI CSI-2: 协议精解与FPGA摄像头开发实战》-- CSI-2 协议详细解析 (一)
CSI-2 协议详细解析 (一) 1. CSI-2层定义(CSI-2 Layer Definitions) 分层结构 :CSI-2协议分为6层: 物理层(PHY Layer) : 定义电气特性、时钟机制和传输介质(导线&#…...
(二)TensorRT-LLM | 模型导出(v0.20.0rc3)
0. 概述 上一节 对安装和使用有个基本介绍。根据这个 issue 的描述,后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作,其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...
Leetcode 3577. Count the Number of Computer Unlocking Permutations
Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接:3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯,要想要能够将所有的电脑解锁&#x…...
React Native在HarmonyOS 5.0阅读类应用开发中的实践
一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强,React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 (1)使用React Native…...
基于Uniapp开发HarmonyOS 5.0旅游应用技术实践
一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架,支持"一次开发,多端部署",可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务,为旅游应用带来…...
SpringTask-03.入门案例
一.入门案例 启动类: package com.sky;import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cache.annotation.EnableCach…...
SiFli 52把Imagie图片,Font字体资源放在指定位置,编译成指定img.bin和font.bin的问题
分区配置 (ptab.json) img 属性介绍: img 属性指定分区存放的 image 名称,指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件,则以 proj_name:binary_name 格式指定文件名, proj_name 为工程 名&…...
在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案
这个问题我看其他博主也写了,要么要会员、要么写的乱七八糟。这里我整理一下,把问题说清楚并且给出代码,拿去用就行,照着葫芦画瓢。 问题 在继承QWebEngineView后,重写mousePressEvent或event函数无法捕获鼠标按下事…...
