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>
<codemirror
v-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 = e
emit('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'