【vue-codemirror】Vue中强大的编辑器插件--vue-codemirror

在这里插入图片描述

✨✨ 欢迎大家来到景天科技苑✨✨

🎈🎈 养成好习惯,先赞后看哦~🎈🎈

🏆 作者简介:景天科技苑
🏆《头衔》:大厂架构师,华为云开发者社区专家博主,阿里云开发者社区专家博主,CSDN全栈领域优质创作者,掘金优秀博主,51CTO博客专家等。
🏆《博客》:Python全栈,Golang开发,云原生开发,前后端框架,PyQt5和Tkinter桌面开发,小程序开发,人工智能,js逆向,App逆向,网络系统安全,数据分析,Django,fastapi,flask等框架,云原生K8S集群搭建与管理,linux,shell脚本等实操经验,网站搭建,数据库等分享。

所属的专栏:前端零基础,实战进阶教学
景天的主页:景天科技苑

在Vue中如何使用CodeMirror插件

CodeMirror是一个功能强大的Web代码编辑器,广泛应用于各种Web应用中。在Vue3项目中集成CodeMirror,可以显著提升代码编辑和展示的用户体验。本文将结合实际案例,详细介绍在Vue3中使用CodeMirror插件的方法。

一、安装CodeMirror插件

首先,我们需要安装CodeMirror相关的插件。在Vue3项目中,可以通过npm或yarn进行安装。

  1. 安装vue-codemirror包

    npm install vue-codemirror --save
    

    或者

    yarn add vue-codemirror
    
  2. 安装语言支持包

    如果你需要支持特定的编程语言,比如JavaScript,可以安装对应的语言包。

    npm i @codemirror/lang-javascript
    

    或者

    yarn add @codemirror/lang-javascript
    
  3. 安装主题包

    CodeMirror提供了多种主题,你可以选择自己喜欢的主题进行安装。例如,安装One Dark主题:

    npm i @codemirror/theme-one-dark
    

    或者

    yarn add @codemirror/theme-one-dark
    

二、创建CodeMirror组件

接下来,我们需要在Vue3项目中创建一个CodeMirror组件,用于代码编辑和展示。

  1. 新建组件mirrorTextArea.vue

    <template><codemirrorv-model="code"placeholder="Code goes here...":style="{ height: '100%' }":autofocus="true":tabSize="2":extensions="extensions"/>
    </template><script lang="ts" setup>
    import { Codemirror } from "vue-codemirror";
    import { javascript } from "@codemirror/lang-javascript";
    import { oneDark } from "@codemirror/theme-one-dark";
    import { ref } from "vue";
    import { EditorView } from "@codemirror/view";let myTheme = EditorView.theme({"&": { color: "#0052D9", backgroundColor: "#FFFFFF" },".cm-content": { caretColor: "#0052D9" },".cm-activeLine": { backgroundColor: "#FAFAFA" },".cm-activeLineGutter": { backgroundColor: "#FAFAFA" },"&.cm-focused .cm-cursor": { borderLeftColor: "#0052D9" },"&.cm-focused .cm-selectionBackground, ::selection": {backgroundColor: "#0052D9",color: "#FFFFFF"},".cm-gutters": { backgroundColor: "#FFFFFF", color: "#ddd", border: "none" }
    }, { dark: true });interface IProps {height?: string;
    }const props = withDefaults(defineProps<IProps>(), { height: '400px' });
    const code = ref('');
    const extensions = [javascript(), myTheme];const change = () => {// 可以在这里添加代码变化时的处理逻辑
    };
    </script><style scoped>
    /* 可以在这里添加组件的样式 */
    </style>
    

    在这个组件中,我们使用了vue-codemirror提供的Codemirror组件,并通过v-model指令实现了双向数据绑定。我们还设置了编辑器的一些基本属性,如自动聚焦、制表符大小等,并添加了JavaScript语言支持和自定义的One Dark主题。

  2. 在父组件中使用mirrorTextArea组件

    现在,我们可以在父组件中使用mirrorTextArea组件来展示代码编辑器。

    <template><div><mirrorTextArea :height="editorHeight" /></div>
    </template><script lang="ts" setup>
    import { ref } from "vue";
    import mirrorTextArea from "./components/mirrorTextArea.vue";const editorHeight = ref('600px');
    </script><style scoped>
    /* 可以在这里添加父组件的样式 */
    </style>
    

    在这个例子中,我们将mirrorTextArea组件的高度设置为600px,并通过:height属性传递给子组件。

三、配置CodeMirror编辑器

CodeMirror编辑器提供了丰富的配置选项,可以满足不同的需求。接下来,我们将介绍一些常用的配置选项。

  1. 设置编辑器高度和宽度

    可以通过内联样式或CSS类来设置编辑器的高度和宽度。

    <codemirrorv-model="code":style="{ height: '400px', width: '600px' }"placeholder="Code goes here...":autofocus="true":tabSize="2":extensions="extensions"
    />
    
  2. 设置语言模式

    CodeMirror支持多种编程语言,可以通过设置mode属性来选择语言模式。

    <codemirrorv-model="code":style="{ height: '400px' }"placeholder="Code goes here...":autofocus="true":tabSize="2":extensions="[javascript(), oneDark]"mode="text/javascript"
    />
    

    在这个例子中,我们将编辑器设置为JavaScript模式。

  3. 设置主题

    可以通过设置extensions属性来应用主题。

    <codemirrorv-model="code":style="{ height: '400px' }"placeholder="Code goes here...":autofocus="true":tabSize="2":extensions="[javascript(), oneDark]"
    />
    

    在这个例子中,我们应用了One Dark主题。

  4. 设置自动聚焦

    可以通过设置autofocus属性来使编辑器在页面加载时自动聚焦。

    <codemirrorv-model="code":style="{ height: '400px' }"placeholder="Code goes here...":autofocus="true":tabSize="2":extensions="[javascript(), oneDark]"
    />
    
  5. 设置制表符大小

    可以通过设置tabSize属性来设置制表符的大小(以空格为单位)。

    <codemirrorv-model="code":style="{ height: '400px' }"placeholder="Code goes here...":autofocus="true":tabSize="4":extensions="[javascript(), oneDark]"
    />
    
  6. 设置占位符

    可以通过设置placeholder属性来显示占位符文本。

    <codemirrorv-model="code":style="{ height: '400px' }"placeholder="Enter your code here...":autofocus="true":tabSize="2":extensions="[javascript(), oneDark]"
    />
    
  7. 禁用编辑器

    可以通过设置disabled属性来禁用编辑器,使其变为只读状态。

    <codemirrorv-model="code":style="{ height: '400px' }"placeholder="Code goes here...":autofocus="true":tabSize="2":extensions="[javascript(), oneDark]":disabled="true"
    />
    
  8. 监听事件

    CodeMirror提供了多种事件,如changeinputready等,可以通过监听这些事件来处理编辑器中的变化。

    <codemirrorv-model="code":style="{ height: '400px' }"placeholder="Code goes here...":autofocus="true":tabSize="2":extensions="[javascript(), oneDark]"@change="handleChange"@input="handleInput"@ready="handleReady"
    /><script lang="ts" setup>
    import { ref } from "vue";const code = ref('');const handleChange = (value: string, viewUpdate: any) => {console.log('Code changed:', value);
    };const handleInput = (value: string) => {console.log('Code input:', value);
    };const handleReady = (editor: any) => {console.log('Editor is ready:', editor);
    };
    </script>
    

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

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

相关文章

Linux下学【MySQL】所有常用类型详解( 配实操图 通俗易懂 )

每日激励&#xff1a;“当你觉得你会幸运时&#xff0c;幸运就会眷顾你&#xff0c;所以努力吧&#xff0c;只要你把事情做好&#xff0c;并觉得你会幸运&#xff0c;你将会变得幸运且充实。” 绪论​&#xff1a; 本章继续学习MySQL的知识&#xff0c;本章主要讲到mysql中的所…

迁移学习中模型训练加速(以mllm模型为例),提速15%以上

根据模型训练过程的显存占用实测的分析,一个1g参数的模型(存储占用4g)训练大约需要20g的显存,其中梯度值占用的显存约一半。博主本意是想实现在迁移学习(冻结部分参数)中模型显存占用的降低,结果不太满意,只能实现训练速度提升,但无法实现显存占用优化。预计是在现有的…

你了解网络层的 ICMP 吗?

你了解网络层的 ICMP 吗&#xff1f; 一. 什么是 ICMP二. ICMP 的工作原理三. ICMP 的结构四. ICMP 的常见应用五. ICMP 的局限性与安全性六. 总结 前言 这是我在这个网站整理的笔记,有错误的地方请指出&#xff0c;关注我&#xff0c;接下来还会持续更新。 作者&#xff1a;神…

32.在 Vue 3 中上传 KML 文件并在地图上显示

前言 在现代的地理信息系统&#xff08;GIS&#xff09;应用中&#xff0c;我们经常需要将地理空间数据加载到地图中以供可视化展示。KML&#xff08;Keyhole Markup Language&#xff09;是一种基于 XML 格式的文件格式&#xff0c;广泛用于存储地理信息数据&#xff0c;特别…

uniapp使用百度地图配置了key,但是显示Map key not configured

搞了我两天的一个问题。 hbuilderx版本&#xff1a;4.36 问题介绍&#xff1a; 我的项目是公司的项目&#xff0c;需要在H5端使用百度地图&#xff0c;使用vue-cli创建的uniapp&#xff0c;就是uni代码在src里的目录结构。就是使用这种方式才会遇到这个问题。 问题原因&#xf…

使用cuda12编译时报错block_merge_sort.cuh(169): error: expected a “,“ or “>“

模型的工程化版C程序使用CUDA11.3和11.6编译时没任何错误&#xff0c;为适应高版本的jetpack环境&#xff0c;切换到CUDA12编译时总是报错: /workspace/cuda-12.0/bin/nvcc /workspace/focc/iou3d_nms.cu -c -o ./build/CMakeFiles/bev.dir/src/./bev_generated_iou3d_nms.cu.…

React状态管理常见面试题目(二)

为什么 Redux 能做到局部渲染? Redux能做到局部渲染&#xff0c;主要是因为它采用了单向数据流和状态管理机制。在Redux中&#xff0c;整个应用的状态被存储在一个单一的store中&#xff0c;当状态发生变化时&#xff0c;Redux通过分发action来更新state&#xff0c;并通过re…

【Qt】drawText字体大小问题探究

背景 软件的一个功能是&#xff1a; 打开图片在图片上绘制序号&#xff0c;序号的样式是圆圈内包含数字将带有序号的图片打印出来 实现思路也很简单&#xff0c;在屏幕上显示时重写paintEvent函数&#xff0c;利用QPainter完成图片和序号的绘制。打印时只需要将QPainter对应…

Unity背包道具拖拽(极简版实现)

&#xff08;感觉Csdn代码页面可以再大一点或者加个放大功能 不然得划着看不太舒服&#xff09; 1.关键接口&#xff0c;三个拖拽相关的 2.关键参数&#xff0c;PointerEventData 一直没仔细看过&#xff0c;其实有包含鼠标相关的很多参数&#xff0c;鼠标点击次数&#xff…

Win11安装安卓子系统WSA

文章目录 简介一、启用Hyper-V二、安装WSA三、安装APKAPK商店参考文献 简介 WSA&#xff1a;Windows Subsystem For Android 一、启用Hyper-V 控制面板 → 程序和功能 → 启用或关闭 Windows 功能 → 勾选 Hyper-V 二、安装WSA 进入 Microsoft Store&#xff0c;下拉框改为 …

《红队和蓝队在网络安全中的定义与分工》

网络安全中什么是红队蓝队 在网络安全领域&#xff0c;红队和蓝队是一种对抗性的演练机制&#xff0c;用于测试和提升网络安全防御能力。 红队&#xff08;Red Team&#xff09; 定义与目标 红队是扮演攻击者角色的团队。他们的主要任务是模拟真实的网络攻击&#xff0c;利用各…

Redis 和 Mysql 中的数据一致性问题

Redis 和 MySQL 的数据很难直接实现 强一致性&#xff0c;但可以通过一些策略尽量接近或实现 最终一致性。下面从两者的特性、挑战以及解决方案来分析。 Redis 和 MySQL 的特性 Redis&#xff1a; 是一个基于内存的高性能键值数据库&#xff0c;常用于缓存、分布式锁和消息队…

数据结构 ——二叉树转广义表

数据结构 ——二叉树转广义表 1、树转广义表 如下一棵树&#xff0c;转换为广义表 root(c(a()(b()()))(e(d()())(f()(j(h()())())))) (根&#xff08;左子树&#xff09;&#xff08;右子树&#xff09;) 代码实现 #include<stdio.h> #include<stdlib.h>//保存…

企业车辆管理系统(源码+数据库+报告)

一、项目介绍 352.基于SpringBoot的企业车辆管理系统&#xff0c;系统包含两种角色&#xff1a;管理员、用户,系统分为前台和后台两大模块 二、项目技术 编程语言&#xff1a;Java 数据库&#xff1a;MySQL 项目管理工具&#xff1a;Maven 前端技术&#xff1a;Vue 后端技术&a…

ubuntu20.04复现 Leg-KILO

这里写目录标题 opencv版本问题下载3.2.0源代码进入解压后的目录创建构建目录运行 CMake 配置 配置时指定一个独立的安装目录&#xff0c;例如 /opt/opencv-3.2&#xff1a;出错&#xff1a; 使用多线程编译错误1&#xff1a; stdlib.h: 没有那个文件或目录错误2&#xff1a;er…

如何保证开源AI呼入机器人和AI呼出机器人的数据安全性?

如何保证开源AI呼入机器人和AI呼出机器人的数据安全性&#xff1f; 作者&#xff1a;开源呼叫中心FreeIPCC 确保开源AI呼入机器人和AI呼出机器人的数据安全性是部署这些智能系统时不可或缺的一部分。随着越来越多的企业依赖于自动化客户服务和外呼营销&#xff0c;保护用户隐…

基于SpringBoot+vue的高校学生成绩管理系统

目录 一、绪论1.1 开发背景1.2 系统开发平台1.2.1 Vue简介1.2.2 IDEA简介1.2.3 MySQL简介 1.3 系统开发环境 二、需求分析2.1 系统需求分析2.2 系统数据流图 三、概要设计3.1 业务流程分析 四、详细设计4.1 系统功能结构图4.2 E-R模型4.3 数据库表设计 五、模块实现5.1 管理员主…

微信小程序苹果手机自带的数字键盘老是弹出收起,影响用户体验,100%解决

文章目录 1、index.wxml2、index.js3、index.wxss1、index.wxml <!--index.wxml--> <view class="container"><view class="code-input-container"><view class="code-input-boxes"><!-- <block wx:for="{{…

Docker--Docker Image(镜像)

什么是Docker Image&#xff1f; Docker镜像&#xff08;Docker Image&#xff09;是Docker容器技术的核心组件之一&#xff0c;它包含了运行应用程序所需的所有依赖、库、代码、运行时环境以及配置文件等。 简单来说&#xff0c;Docker镜像是一个轻量级、可执行的软件包&…

RabbitMQ的核心组件有哪些?

大家好&#xff0c;我是锋哥。今天分享关于【RabbitMQ的核心组件有哪些&#xff1f;】面试题。希望对大家有帮助&#xff1b; RabbitMQ的核心组件有哪些&#xff1f; 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 RabbitMQ是一个开源的消息代理&#xff08;Messag…