vue3 使用 codemirror 实现yaml文件的在线编辑

vue3 使用 codemirror 实现yaml文件的在线编辑

  • 1. 使用情形
  • 2. 插件下载
  • 3. 封装yaml编辑器组件
  • 4. 父组件使用
  • 5. js-yaml 使用
  • 6. 备注

1. 使用情形

需要对yaml文件进行在线编辑,并且进行基础格式验证
在这里插入图片描述

2. 插件下载

vue-codemirror 在线代码编辑器插件
js-yaml 用于转换json和yaml格式
@codemirror/lang-yaml 用于在编辑器中进行yaml格式验证

npm install js-yaml vue-codemirror @codemirror/lang-yaml codemirror

3. 封装yaml编辑器组件

<template><codemirrorv-model="code"ref="mycodemirror":autofocus="true":extensions="extensions":indent-with-tab="true"@change="handleChange":tab-size="2"/>
</template>
<script lang="ts" name="CodemirrorYaml" setup>
import { Codemirror } from 'vue-codemirror'
import { yaml } from '@codemirror/lang-yaml'
import { ref } from 'vue'const emit = defineEmits(['update:modelValue', 'update:textVal'])
const code = ref('')
const extensions = [yaml()]
const handleChange = (e: string) => {code.value = eemit('update:modelValue', code.value)
}
</script>
<style></style>

4. 父组件使用

<CodemirrorYaml v-model="updateForm.valuesSource" />

5. js-yaml 使用

import * as yaml from 'js-yaml'
// load 实现将yaml格式string转成json
const valuesSource = yaml.load('apiGateway: 172.15.15.15\napiGatewayPort: 30084\nchart: test-rt')
// dump实现将json转成yaml格式string, {apiGateway: '172.15.15.15', apiGatewayPort: 30084, chart: 'test-rt'}
const yamlString = yaml.dump(valuesSource)

6. 备注

因为@codemirror/lang-yaml需要从github拉取,在服务器拉取npm包的时候可能会出行超时问题,可以本地下载后放到项目中

在这里插入图片描述

import { yaml } from '@/components/CodeMirror/lang-yaml'

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

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

相关文章

容联云容犀Copilot&Agent入选《中国 AI Agent 产品罗盘》

近日&#xff0c;InfoQ研究中心推出《中国AI Agent应用研究报告》&#xff0c;并在报告中对现行的中国AI Agent产品进行梳理总结&#xff0c;并形成《中国AI Agent产品罗盘》。 作为“营销服”领域垂直类Agent&#xff0c;容联云容犀Copilot&#xff06;Agent入选2024中国AI A…

java8+springboot2.3升级jdk17+springboot2.7.9踩坑

一.问题: java.lang.ExceptionInInitializerError: nullat java.base/java.lang.Class.forName0(Native Method)at java.base/java.lang.Class.forName(Class.java:375)。。。。。。内部保密。。。。at org.springframework.context.annotation.ParserStrategyUtils.invokeAwa…

封装智能指针 qt实现登录界面

1.封装独占智能指针——unique_ptr #include <iostream> #include <utility> // For std::move// 命名空间 namespace custom_memory { template <typename T> class myPtr { public:// 使用初始化列表进行初始化explicit myPtr(T* p nullptr) noexcept : …

ThinkPHP8出租屋管理系统

有需要请加文章底部Q哦 可远程调试 ThinkPHP8出租屋管理系统 一 介绍 此出租屋管理系统基于ThinkPHP8框架开发&#xff0c;数据库mysql&#xff0c;前端Vue3&#xff0c;前后端不分离&#xff0c;系统主要角色为管理员。房租计算器&#xff0c;房东记账收租管理&#xff0c;房…

NX二次开发—柱面中心线工具

设计一个柱面中心线工具,可以实现选择对象,画出圆柱的中心线,可以更改中心的线的颜色、线型、线宽和图层,是否延长,是否关联。 先在NX上进行界面设计 添加选择对象,并设置标题,选择设置为多选 添加组,在组里添加线条颜色/线型/线宽,设置颜色ColorValue和线型Value 这…

C++详解string(全面解析)

目录 string的概念&#xff1a; string的框架&#xff1a; 1、成员函数 2、迭代器&#xff08;Iterators&#xff09;​编辑 3、容量 4、元素访问 5、修改 6、非成员函数重载 string的构造和拷贝构造&#xff1a; string的析构&#xff1a; string的访问&#xff1a;…

单片机,传感器等低功耗管理

**有些客户需求&#xff0c;把设备做成低功耗管理&#xff0c;这样就可以节省电池的电量&#xff0c;也可以增加传感器的使用寿命 HCLK为CPU提供时钟&#xff0c;内核执行代码。当CPU不需要继续运行时&#xff0c;可以利用多种低功耗模式&#xff0c;等待某个事件触发 ① 睡眠…

单链表的实现(C语言)

目录 1.单链表 1.1 实现单链表 1.1.1 文件创建 1.1.2 链表功能了解 1.1.3 链表的结点 1.1.4 链表的函数声明 1.1.5 链表功能的实现 链表是一种链式结构&#xff0c;物理结构不连续&#xff0c;逻辑结构是连续的&#xff0c;在计算机中链表的实际存储是按照一个结点内存放…

pod install 报错处理

由于墙的原因&#xff0c;pod install 、 pod update经常报错 有效的解决方案(推荐)&#xff1a; 以SnapKit为例 找不报错的同事要以下两个文件&#xff08;指定的版本&#xff09; 1. /Users/xxx/Library/Caches/CocoaPods/Pods/Release/SnapKit 2. /Users/xxx/Library/Cac…

95. UE5 GAS RPG 实现创建多段飞弹攻击敌人

从这篇开始&#xff0c;我们将实现一些技能&#xff0c;比如多段火球术&#xff0c;闪电链等等。 在这一篇里&#xff0c;我们先实现多段火球术&#xff0c;技能可以通过配置发射出多个火球术进行攻击。 创建多段火球函数 首先在我们之前创建的RPGFireBolt.h类里面增加一个生…

(11)(2.1.1) PWM、OneShot和OneShot125 ESC(一)

文章目录 前言 1 PWM 2 OneShot 3 参数说明 前言 大多数 ArduPilot 飞行器使用由无刷电机 ESC 控制的无刷电机。这些 ESC 使用的最常见协议是PWM、OneShot、OneShot125 和 DShot。本页介绍前三种&#xff08;PWM、OneShot 和OneShot125&#xff09;。 &#xff01;Warning…

从C语言过渡到C++

&#x1f4d4;个人主页&#x1f4da;&#xff1a;秋邱-CSDN博客☀️专属专栏✨&#xff1a;C &#x1f3c5;往期回顾&#x1f3c6;&#xff1a;单链表实现&#xff1a;从理论到代码-CSDN博客&#x1f31f;其他专栏&#x1f31f;&#xff1a;C语言_秋邱的博客-CSDN博客 目录 ​…

数学建模笔记—— 模糊综合评价

数学建模笔记—— 模糊综合评价 模糊综合评价1. 模糊数学概述2. 经典集合和模糊集合的基本概念2.1 经典集合2.2 模糊集合和隶属函数1. 基本概念2.模糊集合的表示方法3. 模糊集合的分类4. 隶属函数的确定方法 3. 评价问题概述4. 一级模糊综合评价模型典型例题 5. 多层次模糊综合…

【鸿蒙开发工具报错】Build task failed. Open the Run window to view details.

Build task failed. Open the Run window to view details. 问题描述 在使用deveco-studio 开发工具进行HarmonyOS第一个应用构建开发时&#xff0c;通过Previewer预览页面时报错&#xff0c;报错信息为&#xff1a;Build task failed. Open the Run window to view details.…

flutter调通原生页面

最近身体真的是过于不舒服&#xff0c;等好点再来解释&#xff0c;真的是屋漏偏逢连阴雨

电脑文件怎么加密?企业常用的文件加密软件有哪些?10款推荐

随着数字化转型的加速&#xff0c;企业数据安全变得越来越重要。文件加密是保护敏感信息免遭未授权访问和数据泄露的关键措施。以下是2024年企业常用的10款文件加密软件推荐&#xff0c;旨在帮助企业构建坚固的数据安全防线。 1.安秉防泄密软件 安秉防泄密软件是一款全面的数据…

计算机网络 --- 计算机网络的分类

一、计算机网络分类 1.1 按分布范围分类 举例&#xff1a;广域网&#xff08;WAN&#xff09;、局域网&#xff08;LAN&#xff09; 举例&#xff1a;个域网&#xff08;PAN&#xff09; 1.2 按传输技术分类 广播式网络――当一台计算机发送数据分组时&#xff0c;广播范围…

CSP-J/S复赛历年考查知识点整理

CSP-J/S复赛历年考查知识点整理&#xff01;CSP-J/S复赛共4道编程题&#xff0c;每道题分值为100分&#xff0c;共400分&#xff0c;比赛试时间为J组3.5小时&#xff0c;S组4小时。 按照题目顺序&#xff0c;将4道题依次命名为T1、T2、T3、T4。 题目包括试题描述、数据范围、输…

Zabbix自定义监控项与触发器

当我们需要获取某台主机上的数据时&#xff0c;直接利用 zabbix 提供的模板可以很方便的获得需要的数据,但是有些特别的数据&#xff0c;利用这些现有的模板或监控项是无法实现的&#xff0c;例如网站状态信息的监控、mysql数据库主从状态等信息。这是就需要自己定义键值和监控…

基于SpringBoot的租房网站系统

你好呀&#xff0c;我是计算机学姐码农小野&#xff01;如果有相关需求&#xff0c;可以私信联系我。 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;SpringBoot框架 工具&#xff1a;ECLIPSE 系统展示 首页 管理员功能界面 用户信息界面 预约看房界…