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: '400px', textAlign: 'left'}"
    :autofocus="true"
    :indent-with-tab="true"
    :tab-size="2"
    :extensions="extensions"
    @ready="handleReady"
    @change="log('change',$event)"
    @focus="log('focus', $event)"
    @blur="log('blur',$event)"
    />

</template>

<script lang="ts">
import {defineComponent, onMounted, ref, shallowRef} from 'vue'
// 核心库
import {Codemirror} from "vue-codemirror";
//
import {javascript} from "@codemirror/lang-javascript";
import {oneDark} from "@codemirror/theme-one-dark";
import axios from "axios";
import {editorProps} from "@tinymce/tinymce-vue/lib/es2015/main/ts/components/EditorPropTypes";


// codemirror 定义初始化组件
export default defineComponent({
  name: "Editor",
  components: {Codemirror},
  setup(){
    const code = ref("");
  // 扩展编辑器主题颜色
    const extensions = [javascript(), oneDark]
  //
    const view = shallowRef();
  //
    const handleReady = (payload:any) =>{
      view.value = payload.view
    };
    //
    const  getCodemirrorStates = () => {
      const state = view.value.state;
      const ranges = state.selection.ranges;
      const selected = ranges.reduce((r:any, range:any) => r + range.to - range.from, 0); // 选中的值
      const cursor = ranges[0].anchor; // 光标
      const length = state.doc.length; // 代码长度
      const lines = state.doc.lines; // 行数
    };
    return {
      code,
      extensions,
      handleReady,
      log: console.log
    }
  }
})
onMounted(()=>{
  axios.get("/api/e_game_api").then(res =>{
    console.log("配置文件内容")
    const e_game_apiData = res.data
    console.log(e_game_apiData)
  })

})
const getValue = () => {
  return editorProps
}
</script>



<style scoped>

</style>