本文主要是介绍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文件编辑器插件的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!