鲜花网站设计,室内装饰设计专业介绍,js博客网站开发计划书,网络系统管理技能大赛教程需求#xff1a;前端编写yaml配置文件 #xff0c;检查yaml语法 提供语法高亮 。
默认内容从后端接口获取 显示在前端 #xff0c; 前端在codemirror 插件中修改文件内容 #xff0c;并提交修改
后端将提交的内容写入服务器配置文件中 。 codemirror 通过ref 后期编辑器…需求前端编写yaml配置文件 检查yaml语法 提供语法高亮 。
默认内容从后端接口获取 显示在前端 前端在codemirror 插件中修改文件内容 并提交修改
后端将提交的内容写入服务器配置文件中 。 codemirror 通过ref 后期编辑器对象对编辑器值(内容) 进行获取和修改操作
双向绑定数据内容
templatev-modelcode
/template
ts中 动态获取后端接口数据
编辑器默认的内容 可以通过axios 获取后端数据
script langtsconst 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
}
完整代码
templatecodemirrorv-modelcodeplaceholderyaml编辑器:style{height: 400px, textAlign: left}:autofocustrue:indent-with-tabtrue:tab-size2:extensionsextensionsreadyhandleReadychangelog(change,$event)focuslog(focus, $event)blurlog(blur,$event)//templatescript langts
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.dataconsole.log(e_game_apiData)})})
const getValue () {return editorProps
}
/scriptstyle scoped/style
