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: '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.dataconsole.log(e_game_apiData)})})
const getValue = () => {return editorProps
}
</script><style scoped></style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/684123.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

jacob使用教程---环境搭建及基本组成元素

参考资料: jacob的GitHub地址 jacob官网(个人感觉不重要) microsoft官方VBA文档(很重要,jacob所有的参数都来自于这里) jacob找COM组件 jacob环境配置教程 jacob将word转为各种格式 提取word中审阅内容 本人参考例子及相关资料 具有参考价值的博客 jacob操作e…

2024 前端面试题 附录3

这里记录的是昨天和今天原篇的知识点补充 原篇地址&#xff1a; 2024 前端面试题&#xff08;GPT回答 示例代码 解释&#xff09;No.41 - No.60 2024 前端面试题&#xff08;GPT回答 示例代码 解释&#xff09;No.61 - No.100 2024 前端面试题&#xff08;GPT回答 示例代…

【Python】通过conda安装Python的IDE

背景 系统&#xff1a;win11 软件&#xff1a;anaconda Navigator 问题现象&#xff1a;①使用Navigator安装jupyter notebook以及Spyder IDE 一直转圈。②然后进入anaconda prompt执行conda install jupyter notebook一直卡在Solving environment/-\。 类似问题&#xff1a; …

【Java基础题型】逢7过

朋友聚会的时候可能会玩一个游戏&#xff1a;缝7过 游戏规则&#xff1a;从任意一个数字开始报数&#xff0c;当你要报的数字是包含7或者 是7的倍数时&#xff0c;都要说&#xff1a;"过" 需求&#xff1a;使用程序在控制台打印出1-100之间的满足逢七必过规则的数…

计算机网络——12DNS

DNS DNS的必要性 IP地址标识主机、路由器但IP地址不好记忆&#xff0c;不便于人类用使用&#xff08;没有意义&#xff09;人类一般倾向于使用一些有意义的字符串来标识Internet上的设备存在着“字符串”——IP地址的转换的必要性人类用户提供要访问机器的“字符串”名称由DN…

FreeRTOS知识点

1>任务调度算法 1.抢占式调度&#xff1a;高优先级的任务优先执行&#xff0c;并且可以打断低优先级的任务执行。 在FreeRTOSConfig.h中开启configUSE_PREEMPTION宏&#xff0c;将宏设置为1&#xff0c;关闭&#xff08;将宏设置为0&#xff09; 2.时间片轮转&#xff1a…

Python-1

1. 解释Python中的GIL&#xff08;Global Interpreter Lock&#xff09;及其对多线程编程的影响。 Python中的GIL&#xff08;Global Interpreter Lock&#xff09;是一种互斥锁&#xff0c;它确保在CPython解释器中同一时刻只有一个线程执行Python字节码。 GIL的存在对多线程…

【动态规划】【C++算法】1563 石子游戏 V

作者推荐 【数位dp】【动态规划】【状态压缩】【推荐】1012. 至少有 1 位重复的数字 本文涉及知识点 动态规划汇总 LeetCoce:1563 石子游戏 V 几块石子 排成一行 &#xff0c;每块石子都有一个关联值&#xff0c;关联值为整数&#xff0c;由数组 stoneValue 给出。 游戏中…

【JAVA-Day82】线程中断

线程中断 线程中断&#xff1a;探索 Java 中发送中断信号的方法 &#x1f6a8;&#x1f6d1;摘要 &#x1f4dd;引言 &#x1f680;正文 &#x1f4da;一、什么是线程中断 ❓二、线程什么情况下需要中断 ❓三、模拟线程中断 &#x1f6a8;四、线程中断的应用场景 &#x1f3de;…

云原生容器化-5 Docker常见操作命令

1.登录和退出docker仓库 使用docker login和docker logout分别用于登录和退出docker仓库。 #登录时携带用户名、密码、仓库地址信息 docker login --username test --password test123 192.168.0.22:8000 docker login --username seong --password 3er4#ER$ 192.168.0.22:8…

export和import

export和import是JavaScript中ES6&#xff08;ECMAScript 2015&#xff09;的模块系统的语法&#xff0c;用于实现模块的导出和导入&#xff0c;ES6 的模块系统是 JavaScript 官方标准中定义的模块化规范&#xff0c;现在的前端应用模块化已经很普及了。   export和import的技…

<网络安全>《32 网络信息安全基础(3)网络攻防知识体系》

1 信息安全网络攻防知识 1.网络安全 包括防火墙、入侵检测/防御系统&#xff08;IDS/IPS&#xff09;、安全扫描工具、安全隔离系统等。 2.操作系统安全 包括安全操作系统设计、安全编程、安全测试等。 3.应用安全 包括Web应用安全、数据库应用安全、中间件安全等。 4.数据库安…

Python内置函数03——pow

文章目录 概要基本用法注意事项 概要 Python的内置函数pow(x, y, z)返回x的y次方&#xff0c;如果有第三个参数&#xff0c;则求完幂次后对第三个数取余。 基本用法 1.计算10的2次方 a pow(10, 2) # 10的2次幂 print(a) # 1002.计算5的三次方并取模3 b pow(5, 3, 3) p…

SpringBoot3 + Vue3 由浅入深的交互 基础交互教学

说明&#xff1a;这篇文章是适用于已经学过SpringBoot3和Vue3理论知识&#xff0c;但不会具体如何实操的过程的朋友&#xff0c;那么我将手把手从教大家从后端与前端交互的过程教学。 目录 一、创建一个SpringBoot3项目的和Vue3项目并进行配置 1.1后端配置: 1.1.1applicatio…

【FFmpeg学习】视频变慢处理

视频慢动作处理是个比较常用的操作&#xff0c;可以在播放的时候处理&#xff0c;这里我们考虑把视频修改为慢动作&#xff0c;使用ffmpeg命令&#xff0c;可以这样 ffmpeg -i test.mp4 -vf "setpts5*PTS" -an test_slow3.mp4 这里把视频放慢了5倍&#xff0c;生成…

解锁未来:探秘Zxing二维码技术的神奇世界

解锁未来&#xff1a;探秘Zxing二维码技术的神奇世界 1. 引言 在当今数字化和智能化的社会中&#xff0c;二维码技术已经成为人们生活中不可或缺的一部分。从商品购物、支付结算到健康码、门票核销&#xff0c;二维码无处不在&#xff0c;极大地方便了人们的生活和工作。而Zx…

Python-2

21. 请解释Python中的深拷贝&#xff08;Deep Copy&#xff09;和浅拷贝&#xff08;Shallow Copy&#xff09;以及它们的应用场景。 在Python中&#xff0c;拷贝对象时会涉及到深拷贝&#xff08;Deep Copy&#xff09;和浅拷贝&#xff08;Shallow Copy&#xff09;两个概念…

单源最短路总结+练习题

单源最短路总结 文章目录 单源最短路总结建图方式普通无向图邻接表建图新建源点建图正反建图spfa 单源最短路综合运用dijkstradfsdijkstra二分答案 未完待续....... 建图方式 普通无向图邻接表建图 板子题 1129. 热浪 - AcWing题库 找最短路里的最长路 1128. 信使 - AcWin…

每日五道java面试题之java基础篇(九)

目录&#xff1a; 第一题 你们项⽬如何排查JVM问题第二题 ⼀个对象从加载到JVM&#xff0c;再到被GC清除&#xff0c;都经历了什么过程&#xff1f;第三题 怎么确定⼀个对象到底是不是垃圾&#xff1f;第四题 JVM有哪些垃圾回收算法&#xff1f;第五题 什么是STW&#xff1f; 第…

MySQL 基础知识(六)之数据查询(二)

目录 6 数值型函数 7 字符串函数 8 流程控制函数 9 聚合函数 10 分组查询 (group by) 11 分组过滤 (having) 12 限定查询 (limit) 13 多表查询 13.1 连接条件关键词 (on、using) 13.2 连接算法 13.3 交叉连接 (cross join) 13.4 内连接 (inner join) 13.5 外连接 …