vue3 codemirror yaml文件编辑器插件

本文主要是介绍vue3 codemirror yaml文件编辑器插件，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

需求：前端编写yaml配置文件 ，检查yaml语法 提供语法高亮  。

默认内容从后端接口获取 显示在前端 ， 前端在codemirror 插件中修改文件内容 ，并提交修改

后端将提交的内容写入服务器配置文件中 。

codemirror 通过ref 后期编辑器对象，对编辑器值(内容) 进行获取和修改操作

双向绑定数据内容 

<template>v-model="code"
</template>

ts中 动态获取后端接口数据 

编辑器默认的内容 可以通过axios 获取后端数据

<script lang="ts">
 const code = ref("dsadsdsadsadasdsadasddadasdasdsda");
</script">

通过ref 获取后端接口数据 

const code =ref() 
axios.post("/api/e_game_api").then(res =>{console.log("config配置文件内容")code.value = res.dataconsole.log(code.value)})return {
code 
}

完整代码：

<template><codemirrorv-model="code"placeholder="yaml编辑器":style="{height: '400p

这篇关于vue3 codemirror yaml文件编辑器插件的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---