Vue3使用Monaco-editor
Monaco-editor,一个vs code 编辑器,需要将其集成到项目。不说闲话了,直接上代码。
npm地址:https://www.npmjs.com/package/monaco-editor
中文文档:https://aydk.site/editor/
安装:
pnpm add monaco-editor -S
pnpm add vite-plugin-monaco-editor -D
配置:
vite.config.ts
import { defineConfig} from 'vite'// vs code 编辑器配置
import monacoEditorPlugin from 'vite-plugin-monaco-editor'// https://vitejs.dev/config/
export default ({ mode }) => {return defineConfig({plugins: [monacoEditorPlugin({languageWorkers: ['editorWorkerService', 'typescript', 'json', 'html']})]})
}
封装:
首先先封装个hook如下:
@/hooks/useMonacoEditor.hook.ts
import * as monaco from 'monaco-editor'
import useCommonStore from '@/store/common'
import { ref, nextTick, onBeforeUnmount } from 'vue'export function useMonacoEditor(language: string = 'javascript') {// 编辑器示例let monacoEditor: monaco.editor.IStandaloneCodeEditor | null = null// 目标元素const monacoEditorRef = ref<HTMLElement | null>(null)// 创建实例function createEditor(editorOption: monaco.editor.IStandaloneEditorConstructionOptions = {}) {if(!monacoEditorRef.value) returnmonacoEditor = monaco.editor.create(monacoEditorRef.value, {// 初始模型model: monaco.editor.createModel('', language),// 是否启用预览图minimap: { enabled: true },// 圆角roundedSelection: true,// 主题theme: useCommonStore().mode == 'dark' ? 'vs-dark' : 'vs',// 主键multiCursorModifier: 'ctrlCmd',// 滚动条scrollbar: {verticalScrollbarSize: 8,horizontalScrollbarSize: 8},// 行号lineNumbers: 'on',// tab大小tabSize: 2,//字体大小fontSize: 16,// 控制编辑器在用户键入、粘贴、移动或缩进行时是否应自动调整缩进autoIndent: 'advanced',// 自动布局automaticLayout: true,...editorOption})return monacoEditor}// 格式化async function formatDoc() {await monacoEditor?.getAction('editor.action.formatDocument')?.run()}// 数据更新function updateVal(val: string) {nextTick(() => {if(getOption(monaco.editor.EditorOption.readOnly)) {updateOptions({ readOnly: false })}monacoEditor?.setValue(val)setTimeout(async () => {await formatDoc()}, 10)})}// 配置更新function updateOptions(opt: monaco.editor.IStandaloneEditorConstructionOptions) {monacoEditor?.updateOptions(opt)}// 获取配置function getOption(name: monaco.editor.EditorOption) {return monacoEditor?.getOption(name)}// 获取实例function getEditor() {return monacoEditor}// 页面离开 销毁onBeforeUnmount(() => {if(monacoEditor) {monacoEditor.dispose()}})return {monacoEditorRef,createEditor,getEditor,updateVal,updateOptions,getOption,formatDoc}
}
然后调用上面 useMonacoEditor 封装editor编辑器组件
@/components/MonacoEditor/index.vue
<template><div ref="monacoEditorRef" :style="monacoEditorStyle"></div>
</template>
<script setup lang="ts">
import { useMonacoEditor } from '@/hooks'
import { onMounted, computed, watch } from 'vue'const props = withDefaults(defineProps<{width?: string | number,height?: string | number,language?: string,editorOption?: Object,modelValue: string
}>(), {width: '100%',height: '100%',language: 'javascript',editorOption: () => ({}),modelValue: ''
})const emits = defineEmits<{(e: 'blue'): void,(e: 'update:modelValue', val: string): void
}>()const monacoEditorStyle = computed(() => {return { width: typeof props.width === 'string' ? props.width : props.width + 'px', height: typeof props.height === 'string' ? props.height : props.height + 'px'}
})const { monacoEditorRef, createEditor, updateVal, updateOptions, getEditor } = useMonacoEditor(props.language)onMounted(() => {const monacoEditor = createEditor(props.editorOption)updateMonacoVal(props.modelValue)monacoEditor?.onDidChangeModelContent(() => {emits('update:modelValue', monacoEditor!.getValue())})monacoEditor?.onDidBlurEditorText(() => {emits('blue')})
})watch(() => props.modelValue, () => {updateMonacoVal(props.modelValue)
})function updateMonacoVal(val: string) {if(val !== getEditor()?.getValue()) {updateVal(val)}
}defineExpose({ updateOptions })
</script>
组件使用:
<div class="edit-container"><MonacoEditor ref="MonacoEditRef" v-model="editJson" language="json" />
</div>
<script setup lang="ts">
import MonacoEditor from '@/components/MonacoEditor/index.vue'
import { ref } from 'vue'let editJson = ref('')const MonacoEditRef = ref<InstanceType<typeof MonacoEditor>>()//MonacoEditRef.value!.updateOptions({ theme: 'vs' }) 调用子组件方法修改配置
</script>相关文章:
Vue3使用Monaco-editor
Monaco-editor,一个vs code 编辑器,需要将其集成到项目。不说闲话了,直接上代码。 npm地址:https://www.npmjs.com/package/monaco-editor 中文文档:https://aydk.site/editor/ 安装: pnpm add monaco…...
java 根据ip获取到城市 GeoLite2-City.mmdb
本文可解决 根据ip定位获取不到问题,提供多种方式仅供参考: 1.选型 1.1 实现方式 Java可以实现IP地址解析和省市区信息查询,但是需要借助一些外部数据源或数据库来实现。常用的方法有以下几种: 1.1.1 本地文件解析 可以通过下…...
kaggle使用说明
kaggle kaggle使用参考1、kaggle目录2、kaggle上传本地文件后,如何不改代码就可运行3、已上传文件的修改3.1 重新上传3.2 重写文件 4、创建文件夹5、结果下载5.1 多文件:先打包再下载5.2 重定文件下载链接 kaggle使用参考 Kaggle 新手入门必看ÿ…...
BUUCTF FLAG 1
BUUCTF:https://buuoj.cn/challenges 题目描述: 注意:请将 hctf 替换为 flag 提交,格式 flag{} 密文: 下载附件,得到一张.png图片。 解题思路: 1、因为附件是一张图片,先放到StegSolve中&…...
万物皆可“云” 从杭州云栖大会看数智生活的未来
文章目录 前言一、云栖渐进:一个科技论坛的变迁与互联网历史互联网创新创业飞天进化飞天智能驱动数字中国 二、2023云栖大会:云计算人工智能 玩出科技跨界新花样大会亮点重磅嘉宾热门展览算力馆人工智能馆产业创新馆 总结 前言 10月31日,202…...
LeetCode1518 换水问题
题目描述 超市正在促销,你可以用 numExchange 个空水瓶从超市兑换一瓶水。最开始,你一共购入了 numBottles 瓶水。 如果喝掉了水瓶中的水,那么水瓶就会变成空的。 给你两个整数 numBottles 和 numExchange ,返回你 最多 可以喝…...
强大日志查看器,助力数据联动分析
前言 我们曾讨论过观测云查看器强大的查询筛选和搜索功能,能够帮助用户快速、精准地检索数据,定位故障问题(参见《如何使用查看器筛选、搜索功能进行数据定位?》)。除此之外,日志查看器不仅可以帮助我们收…...
HIBS一些简介
文章目录 距离发展:意义使用挑战安全IOT活动服务频带可行性频谱 距离 海拔约20KM的平流层中,国际电联无线电条例(RR)将HAPS定义为位于20-50公里高度和相对于地球的指定标称固定点的物体上的无线电台。 #高空平台作为IMT基站(HIB…...
OpenCV实现人脸关键点检测
目录 实现过程 1,代码解读 1.1 导入工具包 1.2导入所需图像,以及训练好的人脸预测模型 1.3 将 dlib 的关键点对象转换为 NumPy 数组,以便后续处理 1.4图像上可视化面部关键点 1.5# 读取输入数据,预处理 1.6进行人脸检测 1…...
300万美元!澳大利亚昆士兰州投资当地首家量子公司AQC
澳大利亚模拟量子电路公司(AQC)联合创始人 Tom Stace 教授和 Arkady Federov 副教授(图片来源:网络) 澳大利亚风险投资基金会Uniseed为澳大利亚昆士兰大学的两名教授提供了300万美元的资金,资助他们创办了…...
Android Studio打包AAR
注意 依赖的Android Studio版本为4.2.2 更高的Android Studio版本使用方法可能有所不同,gradle的版本和gradle plugins的版本都会影响使用方式。 基于此,本文只能作为参考,而不能作为唯一答案,如果要完全依赖本文,则…...
【Python基础知识四】控制语句
Python基础知识:控制语句 1 条件控制1.1 if语句1.2 match...case语句 2 循环语句2.1 for循环2.2 for...else语句2.3 while循环2.4 while 循环使用 else 语句2.5 无限循环2.6 break 和 continue 语句及循环中的 else 子句2.6.1 break语句2.6.2 continue语句 2.7 pass…...
Jmeter压测 —— 1秒发送1次请求
场景:有时候测试场景需要设置请求频率为一秒一次(或几秒一次)实现方法一:1、首先需要在线程组下设置循环次数(可以理解为请求的次数) 次数设置为请求300次,其中线程数跟时间自行设置 2、在设置…...
目标检测YOLO实战应用案例100讲-基于改进YOLOv4算法的自动驾驶场景 目标检测
目录 前言 国内外目标检测算法研究现状 传统目标检测算法的发展现状...
Spring Cloud智慧工地源码,利用计算机技术、互联网、物联网、云计算、大数据等新一代信息技术开发,微服务架构
智慧工地系统充分利用计算机技术、互联网、物联网、云计算、大数据等新一代信息技术,以PC端,移动端,设备端三位一体的管控方式为企业现场工程管理提供了先进的技术手段。让劳务、设备、物料、安全、环境、能源、资料、计划、质量、视频监控等…...
AI视频 | Runway的史诗级更新真的那么震撼吗?来看我的试用体验!
就在昨天,Runway,这个生成式AI的领头羊,正式在X上发布了他们史诗级更新 看下视频 【视频2】 这个确实看起来太棒了 注册个账号,看下效果咋样 地址百度哈,注册登录也比较方便 直接邮箱即可 不过我是直接google账号登录的…...
【动作模式识别】实现复合动作模式识别(离线控制模块)
一、思路 一般来说,要实现摸脸动作,需要采集手臂的以下肌肉的肌电信号: 肱二头肌:控制肘关节的屈曲肱三头肌:控制肘关节的伸展前臂屈肌群:控制手腕和手指的屈曲前臂伸肌群:控制手腕和手指的伸…...
Python基础学习009——类的封装
# 面向对象是一种编程思想,还有另一种是面向过程 # 面向过程,具体步骤的实现,所有功能都自己书写 # 面向对象,使用一个个工具(函数),帮助完成各项任务 # 类:对多个特性相同或相似的食物的统称,根据特征不同一个事物可以属于多个类 # 对象:由类实例化的一个事物,指代1个 # 类的组…...
前端开发和后端开发,你更倾向于哪一种?
作为一个Web开发者,你是否曾经面临过这样的选择:是专注于前端开发,还是转向后端开发?前端开发和后端开发是Web开发中的两个不同的领域,它们各有各的特点和优势,也各有各的挑战和难点。那么,你应…...
Selenium 基本功能
#driver.quit()from selenium import webdriver from selenium.webdriver.chrome.service import Service# 尝试传参 s Service("chromedriver.exe") driver webdriver.Chrome(services)driver.get(https://www.baidu.com/) input()#1/导入Selenium库 from seleniu…...
OpenLayers 可视化之热力图
注:当前使用的是 ol 5.3.0 版本,天地图使用的key请到天地图官网申请,并替换为自己的key 热力图(Heatmap)又叫热点图,是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示…...
Cursor实现用excel数据填充word模版的方法
cursor主页:https://www.cursor.com/ 任务目标:把excel格式的数据里的单元格,按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例,…...
边缘计算医疗风险自查APP开发方案
核心目标:在便携设备(智能手表/家用检测仪)部署轻量化疾病预测模型,实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...
STM32+rt-thread判断是否联网
一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...
Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式
点一下关注吧!!!非常感谢!!持续更新!!! 🚀 AI篇持续更新中!(长期更新) 目前2025年06月05日更新到: AI炼丹日志-28 - Aud…...
微信小程序云开发平台MySQL的连接方式
注:微信小程序云开发平台指的是腾讯云开发 先给结论:微信小程序云开发平台的MySQL,无法通过获取数据库连接信息的方式进行连接,连接只能通过云开发的SDK连接,具体要参考官方文档: 为什么? 因为…...
自然语言处理——Transformer
自然语言处理——Transformer 自注意力机制多头注意力机制Transformer 虽然循环神经网络可以对具有序列特性的数据非常有效,它能挖掘数据中的时序信息以及语义信息,但是它有一个很大的缺陷——很难并行化。 我们可以考虑用CNN来替代RNN,但是…...
SpringCloudGateway 自定义局部过滤器
场景: 将所有请求转化为同一路径请求(方便穿网配置)在请求头内标识原来路径,然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...
蓝桥杯3498 01串的熵
问题描述 对于一个长度为 23333333的 01 串, 如果其信息熵为 11625907.5798, 且 0 出现次数比 1 少, 那么这个 01 串中 0 出现了多少次? #include<iostream> #include<cmath> using namespace std;int n 23333333;int main() {//枚举 0 出现的次数//因…...
给网站添加live2d看板娘
给网站添加live2d看板娘 参考文献: stevenjoezhang/live2d-widget: 把萌萌哒的看板娘抱回家 (ノ≧∇≦)ノ | Live2D widget for web platformEikanya/Live2d-model: Live2d model collectionzenghongtu/live2d-model-assets 前言 网站环境如下,文章也主…...
