vue实现xml,sql,JSON自动格式化高亮

实现xml,json,sql代码组件格式化高亮:
需要下载的依赖:
在这里插入图片描述

<template><div class="box"><div class="top" v-if="flag"><span class="text">Theme:</span><el-select v-model="defaultOptions.theme" placeholder="请选择编辑器主题" class="select" @change="changeTheme"><el-option v-for="(theme, index) in themes" :key="index" :label="theme.label":value="theme.value"></el-option></el-select><span class="text">Language:</span><el-select v-model="defaultOptions.language" placeholder="请选择格式化语言" class="select"><el-option v-for="(item, index) in languageList" :key="index" :label="item.label" :value="item.value"></el-option></el-select><el-button type="primary" plain class="btn" @click="formatCode">格式化</el-button><el-button type="primary" plain class="btn" @click="clearSelection">清空</el-button></div><div :style="{ height, width }" :id="`monacoEditorContainer${index}`" class="container" @mouseleave="handleValue"></div></div>
</template><script>
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js';
import 'monaco-editor/esm/vs/editor/contrib/folding/folding.js';
// 代码高亮(将所有支持的语言全部显示)
import 'monaco-editor/esm/vs/basic-languages/monaco.contribution'
import { format } from 'sql-formatter';
import prettyData from 'pretty-data/pretty-data';
// 用于xml语法校验
import xml2js from 'xml2js';export default {props: {flag: { //顶部按钮是否显示type: Boolean,default: true},options: {type: Object,default: () => {}},code: {type: String,},height: {type: String,default: '90%'},width: {type: String,default: '100%'},index: {type: String,default: "01"},},data() {return {defaultOptions: {value: '', // 编辑器的值language: 'xml', //语言folding: true, // 是否折叠theme: 'vs-dark', // 编辑器主题:vs, hc-black, or vs-darkautoIndent: true, // 自动缩进wordWrap: 'on', // 启用自动换行readOnly: false, // 是否只读},languageList: [{ value: 'sql', label: 'SQL' },{ value: 'javascript', label: 'JSON' },{ value: 'xml', label: 'XML' },],themes: [{ value: 'vs', label: 'vs' },{ value: 'vs-dark', label: 'vs-dark' },{ value: 'hc-black', label: 'hc-black' }],monacoEditor: null};},mounted() {this.createMonacoEditor();},watch: {options: {handler() {this.$nextTick(() => {this.monacoEditor.updateOptions(this.standaloneEditorConstructionOptions)})},deep: true},code: {handler(newCode) {this.$nextTick(() => {// 将新数据显示在monacoEditor上this.monacoEditor.setValue(newCode);this.formatCode();});},deep: true,immediate: true,}},computed: {standaloneEditorConstructionOptions() {const options = Object.assign(this.defaultOptions, this.options);if (options.language.toUpperCase() === "JSON") {options.language = "javascript";}return options;}},methods: {formatCode() {const code = this.monacoEditor.getValue();if (!code.trim() || !this.defaultOptions.language) {//  值为空或者语言为空,不执行格式化操作return;}let formattedCode;switch (this.defaultOptions.language) {case 'sql':formattedCode = format(code);break;case 'javascript':try {JSON.parse(code); formattedCode = prettyData.pd.json(code);} catch (error) {this.$message.error(`JSON 解析错误: ${error}`);return;}break;case 'xml':try {// 使用 xml2js 库进行 XML 校验const parser = new xml2js.Parser();parser.parseString(code, (error) => {if (error) {this.$message.error(`XML 解析错误: ${error}`);// Message.error(`XML 解析错误: ${error}`);return;}});formattedCode = prettyData.pd.xml(code);} catch (error) {return;}break;default:return;}monaco.editor.setModelLanguage(this.monacoEditor.getModel(), this.defaultOptions.language);const model = this.monacoEditor.getModel();const formattedContent = {range: model.getFullModelRange(),text: formattedCode,};this.monacoEditor.executeEdits('format', [formattedContent]);},createMonacoEditor() {const container = document.getElementById(`monacoEditorContainer${this.index}`);this.monacoEditor = monaco.editor.create(container, this.standaloneEditorConstructionOptions);},clearSelection() {this.monacoEditor.setValue('');},changeTheme() {monaco.editor.setTheme(this.defaultOptions.theme);},handleValue() {			this.formatCode();this.$emit('getValue', this.monacoEditor.getValue())// 鼠标失去焦点document.activeElement.blur();},},
};
</script><style scoped lang="less">
.box {width: 100%;height: 100%;.top {margin-bottom: 10px;.text {margin-right: 4px;}.btn {margin-right: 20px;margin-left: 0px;}.select {width: 200px!important;margin-right: 20px;}}.container {// width: 100%;// height: 90%;// margin-top: 20px;}
}
</style>

实现效果:
在这里插入图片描述

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

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

相关文章

Vue 3的Composition API和vue2的不同之处

Vue 3的Composition API是Vue.js框架的一个重要更新&#xff0c;它提供了一种新的组件逻辑组织和复用方式。在Vue 2中&#xff0c;我们通常使用Options API&#xff08;data、methods、computed等&#xff09;来组织组件的逻辑&#xff0c;但这种组织方式在处理复杂组件时可能会…

springboot-异步、定时、邮件任务

一、异步任务 1、创建项目 2、创建一个service包 3、创建一个类AsyncService 异步处理还是非常常用的&#xff0c;比如我们在网站上发送邮件&#xff0c;后台会去发送邮件&#xff0c;此时前台会造成响应不动&#xff0c;直到邮件发送完毕&#xff0c;响应才会成功&#xff…

Arduino串口控制舵机机械臂

Arduino nano作为主控板&#xff0c;控制由四个SG90舵机组成的机械臂&#xff0c;原先想着用四个电位计控制舵机转动&#xff0c;结果舵机一直抖动&#xff0c;索性就使用串口类似at指令控制舵机转动。使用的串口中断&#xff0c;通信的数据也是 字母数字 的格式&#xff0c;字…

AI大模型的预训练、迁移和中间件编程

大家好&#xff0c;我是爱编程的喵喵。双985硕士毕业&#xff0c;现担任全栈工程师一职&#xff0c;热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。…

Docker部署前后端服务示例

使用Docker部署js前端 1.创建Dockerfile 在项目跟目录下创建Dockerfile文件&#xff1a; # 使用nginx作为基础镜像 FROM nginx:1.19.1# 指定工作空间 WORKDIR /data/web# 将 yarn build 打包后的build文件夹添加到工作空间 ADD build build# 将项目必要文件添加到工作空间&a…

Linux中汇编语言的学习(加法、乘法、除法、左移、右移、按位与等多种命令操作实例以及ARM的 N、Z、C、V 标志位的解释)

汇编概述 汇编需要学习的大致框架如下&#xff1a; 汇编中的符号 1.指令&#xff1b;能够北嘁肷梢惶?2bit机器码&#xff0c;并且能够被cpui识别和执行 2.伪指令&#xff1a;本身不是指令&#xff0c;编译器可以将其替换成若干条指令 3.伪操作&#xff1a;不会生成指令…

JAVA如何利用接口实现多继承问题

hello&#xff0c;上文带大家学习了java中类的继承&#xff0c;我们可以创建一个父类&#xff0c;将类中的共性抽取出来&#xff0c;通过子类继承的方式来实现代码的复用。今天带大家学习不同类之间的另外几种关系&#xff0c;即多态抽象类和接口。 多态的概念 多态&#xff0c…

TinyEMU编译与使用(一)

TinyEMU编译与使用&#xff08;一&#xff09; 1 介绍2 准备工作3 编译TinyEMU3.1 安装依赖库3.2 编译 4 运行TinyEMU4.1 在线运行4.2 离线运行 5 共享目录5.1 修改root_9p-riscv64.cfg5.2 启动TinyEMU5.3 执行挂载命令 6 TinyEMU命令帮助 1 介绍 原名为riscvemu&#xff0c;于…

可持久化数据结构

可持久化数据结构必须满足在操作过程中数据结构本身的拓扑结构不变&#xff0c;可以用来存下数据结构的所有历史版本。 核心思想&#xff1a;只记录每一个版本与前一个版本不一样的地方。 这里我们讨论两种数据结构的可持久化——trie和线段树。 Trie的可持久化 由于之前没…

02. Nginx入门-Nginx安装

Nginx安装 yum安装 编辑yum环境 cat > /etc/yum.repos.d/nginx.repo << EOF [nginx-stable] namenginx stable repo baseurlhttp://nginx.org/packages/centos/$releasever/$basearch/ gpgcheck1 enabled1 gpgkeyhttps://nginx.org/keys/nginx_signing.key module_…

PTA L2-009 抢红包

题目&#xff1a; 没有人没抢过红包吧…… 这里给出N个人之间互相发红包、抢红包的记录&#xff0c;请你统计一下他们抢红包的收获。 输入格式&#xff1a; 输入第一行给出一个正整数N&#xff08;≤104&#xff09;&#xff0c;即参与发红包和抢红包的总人数&#xff0c;则…

L2-001 紧急救援(Java)

作为一个城市的应急救援队伍的负责人&#xff0c;你有一张特殊的全国地图。在地图上显示有多个分散的城市和一些连接城市的快速道路。每个城市的救援队数量和每一条连接两个城市的快速道路长度都标在地图上。当其他城市有紧急求助电话给你的时候&#xff0c;你的任务是带领你的…