当前位置: 首页 > news >正文

vue实现代码编辑器,无坑使用CodeMirror

vue实现代码编辑器,无坑使用CodeMirror

  • vue实现代码编辑器,使用codemirror@5

坑:本打算cv一下网上的,结果发现网上的博客教程都是错的,而且博客已经是几年前的了,我重新看了github上的,发现安装的命令都已经不一样了。我目前使用CodeMirror 5,最新版是CodeMirror 6了(更适合移动设备、更易于访问、设计更好并且维护更积极)
在这里插入图片描述
在这里插入图片描述

官方地址https://github.com/codemirror/codemirror5
官方文档地址https://codemirror.net/doc/manual.html#config
√正确的安装npm install codemirror@5
×错误的安装npm install codemirror

vue实现代码编辑器,使用codemirror@5

在需要的页面使用

<template><div><textarea ref="editor" v-model="code"></textarea><button @click="clickMe">click me</button></div>
</template><script>
// 引入样式
import 'codemirror/lib/codemirror.css'
// 引入主题色,可更具需求更改或引入更多
import 'codemirror/theme/3024-night.css';// 引入js脚本
import 'codemirror/mode/javascript/javascript.js';
// 引入编辑器模式为python
import 'codemirror/mode/python/python.js';import codemirror from "codemirror"export default {data() {return {// 默认展示的python字符串文本code: `import random# 生成一个随机整数
random_number = random.randint(1, 100)
print("随机数是:", random_number)# 判断随机数是奇数还是偶数
if random_number % 2 == 0:print("这是一个偶数")
else:print("这是一个奇数")
`,// 设置Codemirror的选项options: {tabSize: 4, // 设置缩进mode: "python", // 设置编辑器语言模式lineNumbers: true, // 是否显示行号//是否只读// readOnly : true,lineWrapping: true, // 换行光标位置theme: "3024-night" // 主题色// 更多选项可以在Codemirror文档中找到:https://codemirror.net/doc/manual.html#config}}},methods: {clickMe() {// 获取实例console.log(this.editor);// 设置值this.editor.setValue("想要赋值的文本");// 获取值console.log(this.editor.getValue());},// 初始换,创建codemirror实例initeditor() {this.editor = codemirror.fromTextArea(this.$refs.editor, this.options);}},mounted() {this.initeditor();}
}
</script>

结果
在这里插入图片描述

相关文章:

vue实现代码编辑器,无坑使用CodeMirror

vue实现代码编辑器,无坑使用CodeMirror vue实现代码编辑器,使用codemirror5 坑&#xff1a;本打算cv一下网上的&#xff0c;结果发现网上的博客教程都是错的&#xff0c;而且博客已经是几年前的了&#xff0c;我重新看了github上的&#xff0c;发现安装的命令都已经不一样了。我…...

MR实战:网址去重

文章目录 一、实战概述二、提出任务三、完成任务&#xff08;一&#xff09;准备数据1、在虚拟机上创建文本文件2、上传文件到HDFS指定目录 &#xff08;二&#xff09;实现步骤1、创建Maven项目2、添加相关依赖3、创建日志属性文件4、创建网址去重映射器类5、创建网址去重归并…...

linux 内核编译安装

一、配置 默认配置 make ARCHarm CROSS_COMPILEarm-linux-gnueabihf- omap2plus_defconfig原配置 make ARCHarm CROSS_COMPILEarm-linux-gnueabihf- oldconfig 重新配置 make ARCHarm CROSS_COMPILEarm-linux-gnueabihf- menuconfig二 kernel zImage make ARCHarm CRO…...

hash基础知识(算法村第五关青铜挑战)

一、Hash的概念和基本特征 哈希(Hash)也称为散列&#xff0c;就是把任意长度的输入&#xff0c;通过散列算法&#xff0c;变换成固定长度的输出&#xff0c;这个输出值就是散列值。 二、碰撞处理方法(2种) 在上面的例子中&#xff0c;我们发现有些在Hsh中很多位置可能要存两个甚…...

Linux第8步_USB设置

学习完设置“虚拟机的电源”后&#xff0c;接着学习通过鼠标点击操作U盘&#xff0c;目的是了解USB设置。 1、在桌面&#xff0c;双击“VMware Workstation Pro”图标&#xff0c;得到下图&#xff1a; 2、点击“编辑虚拟机”&#xff0c;得到下图&#xff1a; 只要点击编辑虚…...

第五节 强制规范commit提交 .husky/commit-msg: no-such file or directory问题解决办法

系列文章目录 目录 系列文章目录 前言 操作方法 总结 前言 在每次Git提交时,强制严格执行制定的规范。 操作方法 npm 安装commitlist 进行校验 npm install --save-dev @commitlint/config-conventional@12.1.4 @commitlint/cli@12...

2024年了,难道还不会使用谷歌DevTools么?

我相信您一定对Chrome浏览器非常熟悉,因为它是前端开发者最亲密的伙伴。我们可以使用它查看网络请求、分析网页性能以及调试最新的JavaScript功能。 除此之外,它还提供了许多功能强大但不常见的功能,这些功能可以大大提高我们的开发效率。 让我们来看看。 1. 重新发送XHR…...

springboot(ssm生产管理ERP系统 wms出入库管理系统Java系统

springboot(ssm生产管理ERP系统 wms出入库管理系统Java系统 开发语言&#xff1a;Java 框架&#xff1a;ssm/springboot vue JDK版本&#xff1a;JDK1.8&#xff08;或11&#xff09; 服务器&#xff1a;tomcat 数据库&#xff1a;mysql 5.7&#xff08;或8.0&#xff09;…...

通过使用别名让 SQL 更简短-数据库教程shulanxt.com-帆软软件有限公司

MySQL视频教程导航 https://www.shulanxt.com/database/mysqlvideo/p1 SQL 别名 SQL 别名 通过使用 SQL&#xff0c;可以为表名称或列名称指定别名。 基本上&#xff0c;创建别名是为了让列名称的可读性更强。 列的 SQL 别名语法 SELECT column_name AS alias_name FROM …...

最优化理论分析复习--最优性条件(一)

文章目录 上一篇无约束问题的极值条件约束极值问题的最优性条件基本概念只有不等式约束时 下一篇 上一篇 最优化理论复习–对偶单纯形方法及灵敏度分析 无约束问题的极值条件 由于是拓展到向量空间 R n R^n Rn, 所以可由高数中的极值条件进行类比 一阶必要条件 设函数 f (…...

基于WIFI指纹的室内定位算法matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 4.1WIFI指纹定位原理 4.2 指纹数据库建立 4.3定位 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 matlab2022a 3.部分核心程序 .....................................…...

密码学:一文读懂非对称密码体制

文章目录 前言非对称密码体制的保密通信模型私钥加密-公钥解密的保密通信模型公钥加密-私钥解密的保密通信模型 复合式的非对称密码系统散列函数数字签名数字签名满足的三个基本要求先加密还是先签名&#xff1f;数字签名成为公钥基础设施以及许多网络安全机制的基础什么是单向…...

2_工厂设计_工厂方法和抽象工厂

工厂设计模式-工厂方法 1.概念 工厂方法模式(Fatory Method Pattern ) 是指定义一个创建对象的接口&#xff0c;但让实现这个接口的类来决定实例化哪个类&#xff0c;工厂方法让类的实例化推迟到子类中进行。 在工厂方法模式中用户只需要关心所需产品对应的工厂&#xff0c;…...

k8s之pod进阶

1.k8s的pod重启策略 Always &#xff1a;不论正常退出还是非正常退出都重启deployment的yaml文件只能是always pod的yaml三种模式都可以。 OnFailure&#xff1a;只有状态码非0才会重启&#xff0c;正常退出不重启 Never&#xff1a;正常退出和非正常退出都不重启 容器的退…...

RTTI(运行时类型识别)

RTTI(运行时类型识别) 实验介绍 RTTI 全称 Run Time Type Identification,中文称为 “运行时类型识别”,在程序中使用 typeid 和 dynamic_cast 实现。RTTI 技术允许程序在运行时识别对象的类型。 知识点 typeiddynamic_castRTTI 技术typeid typeid 是 C++ 关键字,用于…...

19.Linux Shell任务控制

文章目录 Linux Shell任务控制1)信号通过键盘生成信号trap 命令捕获信号 2)在后台运行脚本命令后加 & 符使用nohub命令 3)作业控制4)调度优先级nice命令renice 命令 5)定时运行作业at定期执行命令reference 欢迎访问个人网络日志&#x1f339;&#x1f339;知行空间&#x…...

域名流量被劫持怎么办?如何避免域名流量劫持?

随着互联网不断发展&#xff0c;流量成为线上世界的巨大财富。然而一种叫做域名流量劫持的网络攻击&#xff0c;将会在不经授权的情况下控制或重定向一个域名的DNS记录&#xff0c;导致用户在访问一个网站时&#xff0c;被引导到另一个不相关的网站&#xff0c;从而劫持走原网站…...

java案例知识点

一.会话技术 概念 技术 二.跨域 三.过滤器 四.拦截器...

Arrays 的使用

Arrays 概述 提供了数组操作的相关方法&#xff0c;连接数组和集合 asList 返回指定数组的列表列表和数组的引用位置相同 Integer[] arrs new Integer[] {1,2,3,4,5,6,7,8,9};List<Integer> list Arrays.asList(arrs);System.out.println(list);arrs[5] 100;Syste…...

IDEA中怎么用Postman?这款插件你试试

Postman是大家最常用的API调试工具&#xff0c;那么有没有一种方法可以不用手动写入接口到Postman&#xff0c;即可进行接口调试操作&#xff1f;今天给大家推荐一款IDEA插件&#xff1a;Apipost Helper&#xff0c;写完代码就可以调试接口并一键生成接口文档&#xff01;而且还…...

OpenClaw远程控制方案:通过nanobot实现安全外网访问

OpenClaw远程控制方案&#xff1a;通过nanobot实现安全外网访问 1. 为什么需要远程控制OpenClaw&#xff1f; 上周我需要出差三天&#xff0c;但电脑上运行的OpenClaw自动化任务突然报错。当时我面临两个选择&#xff1a;要么让任务中断三天&#xff0c;要么冒险把本地网关直…...

OpenClaw语音交互扩展:百川2-13B+Whisper实现语音指令控制

OpenClaw语音交互扩展&#xff1a;百川2-13BWhisper实现语音指令控制 1. 为什么需要语音交互能力 去年冬天的一个深夜&#xff0c;我正在调试OpenClaw的自动化脚本&#xff0c;双手因为长时间敲键盘已经有些僵硬。突然想到&#xff1a;如果能让AI听懂我的语音指令直接执行任务…...

效率提升秘籍:用快马平台一键生成21届智能车优化算法模块

提升21届智能车开发效率的实战经验分享 最近在准备21届智能车比赛时&#xff0c;我发现传统开发方式存在不少效率瓶颈。从底层驱动到算法框架&#xff0c;每个环节都需要大量时间调试&#xff0c;而比赛周期又非常紧张。经过反复摸索&#xff0c;我总结出一套能显著提升开发效…...

系统提示msvcp140.dll丢失vcruntime140.dll丢失msvcr100.dll丢失mfc140u.dll丢失 怎么办?其他DLL错误修复

游戏文件打不开&#xff1f;DLL文件缺失&#xff1f;电脑崩溃&#xff1f;DirectX 轻松修复&#xff01;游戏运行库修复文件缺失软件必备安装工具&#xff0c; 这个DirectX 运行库修复工具&#xff0c;一键完成dll缺失修复、解决99.99%程序故障、闪退、卡顿等常见问题,轻松解决…...

你的产品过不了EMC测试?很可能是电源接口这3个PCB布局坑没避开

电源接口EMC设计避坑指南&#xff1a;PCB布局中的三个致命细节 当你的产品在EMC测试中屡屡碰壁时&#xff0c;问题往往不在于防护电路设计本身&#xff0c;而是隐藏在PCB布局的细微之处。许多工程师精心设计了符合规范的防护拓扑&#xff0c;却在传导骚扰测试中遭遇滑铁卢。本文…...

5G NR随机接入实战:手把手教你理解并排查MSG3发送失败的那些坑

5G NR随机接入实战&#xff1a;MSG3发送失败全场景排查指南 当5G终端尝试接入网络时&#xff0c;随机接入过程中的MSG3发送失败是最常见的"拦路虎"之一。作为网络优化的关键指标&#xff0c;MSG3失败直接影响用户体验和网络KPI。本文将带您深入协议栈底层&#xff0c…...

GTE文本向量助力智能写作:文本分类与情感倾向双重把关

GTE文本向量助力智能写作&#xff1a;文本分类与情感倾向双重把关 1. 智能写作的核心挑战&#xff1a;内容质量的多维评估 在内容创作领域&#xff0c;我们常常面临一个基本矛盾&#xff1a;如何同时保证文本的专业性和情感表达&#xff1f;传统写作辅助工具往往只能解决单一…...

7天打造智能助理:OpenClaw+Qwen3-VL:30B飞书开发周计划

7天打造智能助理&#xff1a;OpenClawQwen3-VL:30B飞书开发周计划 1. 为什么选择这个组合&#xff1f; 去年冬天&#xff0c;我偶然在GitHub上发现了OpenClaw这个项目。当时我正在为团队寻找一个既能处理日常办公自动化&#xff0c;又能理解图片内容的智能助手方案。传统的RP…...

别再死记硬背公式了!用3Blue1Brown的几何动画,5分钟搞懂行列式到底是啥

用动画解锁行列式的几何直觉&#xff1a;从死记硬背到可视化理解 当你第一次在课本上看到行列式的计算公式时&#xff0c;是否感到困惑——这个看似随意的ad-bc到底意味着什么&#xff1f;为什么它能够决定矩阵是否可逆&#xff1f;传统教学往往让我们陷入计算的泥潭&#xff0…...

I-Lang SEO实战部署:用结构化协议让Google的AI爬虫读懂你的网页

前言&#xff1a; 我们用I-Lang的结构化方法论做SEO&#xff0c;一个全新的英文商业站&#xff0c;七天打进Google搜索第一页。这篇文章把具体方法公开。 一、前提&#xff1a;Google的爬虫已经是AI了 2024年之后&#xff0c;Google的搜索排名算法发生了根本性变化。Googlebot…...