vue3+ts项目引入vue-codemirror实现yaml代码编辑器

ops/2024/12/22 15:37:35/

重要提示

重新安装依赖后一定要重启项目!!!

网上搜到的案例拿过来都报错?那应该是插件的版本不一样,先弄清版本!!!

本示例相关版本如下

npm i vue-codemirror@6  // 按自己所需的语言装,需要支持js就安装这个
npm i @codemirror/lang-javascript// yaml语言就装这个,其他语言同理
npm i @codemirror/lang-yaml  // 其中的一种深色主题
npm i @codemirror/theme-one-dark 

vue-codemirror 说明

这个插件版本差异真的巨大,我在网上窜来窜去好久,搜到的很多例子实现方法各不相同怎么都有报错,后来才弄清楚这版本问题,差太多了。

vue codemirror v5/v6已经发布。这是一个基于以下内容的新版本CodeMirror@6并且仅对Vue3可用。自从CodeMirror@6新版本将不再支持直接浏览器引用UMD模块。简而言之,新版本是与之前的版本完全不兼容。

封装一个yaml代码编辑器的组件

示例效果如图

 子组件代码

<template><Codemirror:model-value="modelValue":style="editorConfig.style":extensions="editorConfig.extensions"@change="codeChange"></Codemirror>
</template>
<script lang="ts" setup>
import { Codemirror } from "vue-codemirror"
// 语言和主题也需要安装对应的依赖
import { javascript } from "@codemirror/lang-javascript"
import { yaml } from '@codemirror/lang-yaml'
import { oneDark } from "@codemirror/theme-one-dark"defineProps({modelValue: {type: String,default: ''}
})const emit = defineEmits(['update:modelValue'])// const lang = { javascript, yaml }['yaml']这行代码没有什么深义,只是个新写法,也可以不要
// 然后extensions: [lang(), oneDark]这里 lang()直接写对应的语言yaml()或者javascript()这种就行
const lang = { javascript, yaml }['yaml']
const editorConfig = {style: {height: '350px',fontSize: '18px'},extensions: [lang(), oneDark]
}const codeChange = (newVal: any) => {emit('update:modelValue', newVal)
}
</script>
<style scoped></style>

父组件代码

<template><div>父组件中获取数据:{{ yamlCode }}<div class="code-mirror"><YamlEditor v-model="yamlCode"></YamlEditor></div></div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import YamlEditor from '@/components/YamlEditor.vue';const yamlCode = ref();// 这个变量可以向子组件传默认的数据,也可以实时同步子组件里更新后的数据
</script>
<style scoped>
.code-mirror {width: 500px;
}
</style>

总结

1、vue3项目中通过vue-codemirror6.0插件实现yaml代码编辑器,本例只实现了基础的引入和语言主题的设置,还有拼写检查、错误提示、快捷提示等功能有待完善,我也还没研究出来;

2、本例只给出1种主题和2种语言的安装,想要获取很多主题和语言,得自己上网搜下名字叫啥然后去安装:

npm i @codemirror/lang-xxx

npm i @codemirror/theme-xxx

3、vue3中自定义组件封装如何使用v-model实现双向通信,也可以参考本例


http://www.ppmy.cn/ops/106759.html

相关文章

Mybatis【分页插件,缓存,一级缓存,二级缓存,常见缓存面试题】

文章目录 MyBatis缓存分页延迟加载和立即加载什么是立即加载&#xff1f;什么是延迟加载&#xff1f;延迟加载/懒加载的配置 缓存什么是缓存&#xff1f;缓存的术语什么是MyBatis 缓存&#xff1f;缓存的适用性缓存的分类一级缓存引入案例一级缓存的配置一级缓存的工作流程一级…

从智慧城市与代理IP看未来科技与个人隐私间的微妙平衡

现在咱们的城市发展得越来越快&#xff0c;智慧城市的概念也越来越火。啥是智慧城市呢&#xff1f;简单来说&#xff0c;就是利用各种先进的技术&#xff0c;让城市变得更聪明、更高效、更方便。比如说&#xff0c;智能交通可以让道路更畅通&#xff0c;智能医疗可以让看病更便…

Error running tomcat: Can‘t find catalina.jar

一、错误描述&#xff1a; 在运行 java-web项目时出现报错&#xff1a;Error running tomcat: Can‘t find catalina.jar 二、错误原因&#xff1a; tomcat的路径错误&#xff0c;在idea中配置正确的tomcat路径 三、解决方法&#xff1a; 1.点击EditConfigurations 2.点…

软件测试 - 性能测试 (概念)(并发数、吞吐量、响应时间、TPS、QPS、基准测试、并发测试、负载测试、压力测试、稳定性测试)

一、性能测试 目标&#xff1a;能够对个人编写的项目进行接口的性能测试。 一般是功能测试完成之后&#xff0c;最后做性能测试。性能测试是一个很大的范围&#xff0c;在学习过程中很难直观感受到性能。 以购物软件为例&#xff1a; 1&#xff09;购物过程中⻚⾯突然⽆法打开…

STM32(2)基础介绍及新建工程

一、STM32基础介绍 1.开发方式 基于寄存器开发、基于标准库&#xff08;库函数&#xff09;开发、基于HAL开发 2.学习stm32方法 通过学习调用库函数间接配置寄存器 二、新建工程 1、新建工程步骤 2、型号分类 启动文件根据型号分类来选择 3、工程架构

Vue -- 总结 02

Vue脚手架 安装Vue脚手架&#xff1a; 在cmd中安装(输入):npm install -g vue/cli 如果下载慢或下载不了&#xff0c;可以安装(cmd输入)淘宝镜像:npm config set registry https://registry.npmmirror.com 用命令创建Vue项目 在要创建的vue项目的文件夹里输入 cmd 回车 创…

springboot 实现策略模式通过id进入不同的服务类service

在Spring Boot中实现策略模式&#xff0c;通常是将不同的算法封装在单独的类中&#xff0c;并使它们可以相互替换。这些类通常都实现同一个接口。在Spring Boot应用中&#xff0c;你可以通过Spring的依赖注入&#xff08;DI&#xff09;来管理这些策略类的实例&#xff0c;并通…

动态化-鸿蒙跨端方案介绍

一、背景 &#x1f449; 华为在2023.9.25官方发布会上宣布&#xff0c;新的鸿蒙系统将不再兼容安卓应用&#xff0c;这意味着&#xff0c;包括京东金融APP在内的所有安卓应用&#xff0c;在新的鸿蒙系统上将无法运行&#xff0c;需要重新开发专门适用于新鸿蒙系统的专版APP。 …