当前位置: 首页 > 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;而且还…...

三层架构破解小红书数据采集难题:Appium+MitmProxy双引擎实战

三层架构破解小红书数据采集难题&#xff1a;AppiumMitmProxy双引擎实战 【免费下载链接】XiaohongshuSpider 小红书爬取 项目地址: https://gitcode.com/gh_mirrors/xia/XiaohongshuSpider 在小红书内容生态快速发展的今天&#xff0c;数据工程师和产品分析师面临着内容…...

新手入门:跟快马学做项目,从零实现简易版z-library书库网站

作为一个刚入门编程的新手&#xff0c;最近想尝试做一个简单的在线书库网站。这个想法源于我经常使用的z-library&#xff0c;虽然它功能很强大&#xff0c;但作为学习项目&#xff0c;我决定先从最基础的功能开始模仿。下面记录下我的学习过程&#xff0c;希望能帮到同样想入门…...

STC-50kg

【广州兰瑟★电子-杨工】提供的STC-50kg 是美国威世世铨&#xff08;Vishay Celtron&#xff09;旗下一款经典的 S 型拉压双向称重 / 测力传感器&#xff0c;量程 50 公斤 (50kgf / 490N)。 一、核心参数&#xff08;标准型&#xff09; 量程&#xff1a;50 kg (拉力 / 压力双向…...

【开源鸿蒙Flutter跨平台开发实战复盘】从零到一:GitCode口袋工具项目构建全记录

1. 环境搭建&#xff1a;从零开始的跨平台开发之旅 作为一个有Android开发背景但完全没接触过Flutter的开发者&#xff0c;我最初面对开源鸿蒙和Flutter跨平台开发时也是一头雾水。环境搭建这个看似简单的第一步&#xff0c;就让我深刻体会到"万事开头难"的含义。 在…...

目标检测损失函数进化史:从IoU到EIoU/SIoU/WIoU,YOLOv8性能提升完全指南

引言在目标检测领域&#xff0c;损失函数的设计直接影响着模型的收敛速度和检测精度。作为YOLOv8等先进检测器的核心组件&#xff0c;边界框回归损失函数经历了从简单到复杂的演进过程。传统的IoU&#xff08;Intersection over Union&#xff09;损失虽然直观有效&#xff0c;…...

无障碍辅助利器:OpenClaw+GLM-4.7-Flash语音控制电脑实操

无障碍辅助利器&#xff1a;OpenClawGLM-4.7-Flash语音控制电脑实操 1. 为什么我们需要语音控制电脑 去年夏天&#xff0c;我的一位程序员朋友因意外导致手部受伤&#xff0c;暂时失去了正常使用键盘鼠标的能力。看着他艰难地用语音输入法逐字敲代码&#xff0c;我开始思考&a…...

告别复杂配置:SDXL 1.0电影级绘图工坊开箱即用体验

告别复杂配置&#xff1a;SDXL 1.0电影级绘图工坊开箱即用体验 1. 为什么选择SDXL 1.0电影级绘图工坊 在AI绘图领域&#xff0c;Stable Diffusion XL&#xff08;SDXL&#xff09;1.0代表了当前最先进的文本到图像生成技术。然而&#xff0c;对于大多数非技术背景的创作者来说…...

校园网免认证上网?手把手教你用UDP53端口搭建自己的“网络后门”(附服务器配置)

校园网络优化&#xff1a;UDP53端口的高效应用实践 校园网络作为师生日常学习生活的重要基础设施&#xff0c;其稳定性和访问效率直接影响着教学科研活动的开展。本文将深入探讨一种基于UDP53端口的网络优化方案&#xff0c;帮助技术爱好者理解并实现更流畅的网络体验。 1. 校园…...

Fish Speech 1.5入门指南:无需Python基础,5步完成高质量语音生成

Fish Speech 1.5入门指南&#xff1a;无需Python基础&#xff0c;5步完成高质量语音生成 你是不是也遇到过这些烦恼&#xff1f;想给视频配音&#xff0c;但自己的声音不好听&#xff0c;找配音员又太贵&#xff1b;想制作有声书&#xff0c;但录制过程繁琐&#xff0c;效果还…...

通义千问3-Reranker-0.6B效果对比:不同参数规模的性能差异

通义千问3-Reranker-0.6B效果对比&#xff1a;不同参数规模的性能差异 1. 引言 在AI快速发展的今天&#xff0c;文本检索和排序技术已经成为智能搜索、推荐系统和RAG应用的核心。通义千问团队最新推出的Qwen3-Reranker系列模型&#xff0c;提供了从0.6B到8B多种参数规模的选择…...