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.data
      console.log(code.value)
    })


return {
code 
}

完整代码：

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