需求:前端编写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>