monaco-editor 监听保存按钮

最新推荐文章于 2024-06-26 10:17:01 发布
最新推荐文章于 2024-06-26 10:17:01 发布
阅读量3.6k 收藏 5
点赞数 2
分类专栏： node
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/solocao/article/details/89024034
版权

个人已经觉得monaco-editor比CodeMirror好了，所以开始研究monaco-editor。

基本用法网上很多，我的需求是写一段文字后，直接保存，实时在浏览器中显示效果。

但是默认的command + s会直接跳出浏览器的保存网页操作，所以我们需要重写。核心代码如下：

   self.monacoEditor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_S, function () {
        console.log('SAVE pressed!')
      })
曹天骄
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Monaco Editor教程（四）：设置或获取内容，并监听内容的改变
知无涯
09-30 4404
编辑器设置值，改变语言模型，获取值
Monaco Editor编辑器教程（二六）：使用IContextKey动态开启command和action
知无涯
03-13 3667
由于Monaco的文档是使用TS的类型声明来生成的，在生成后必定会有很多属性的描述让人摸不到头脑，并且这些文档又是会混入一些VS Code才能用到的api。在看文档时，读者有时会既不知道这个属性具体影响的地方，也不清楚每个配置值有什么不同。有时一些属性只表明了该属性的值是一个string类型，至于值从哪里来，却没有解释。而今天的文章，就是由这样一个迷惑属性而来的。
Monaco Editor 的基本使用及 Vue 组件封装
最新发布
paper_umbrella的博客
06-26 1079
monaco-editor代码编辑器
monacoEditor自定义快捷键
前端程序猿的博客
11-30 1790
【代码】monacoEditor自定义快捷键。
vue+monato-editor代码编辑高亮，sql变化监听（组件化）--＞优化具体语言引入
weixin_46037781的博客
01-25 3137
一、概念 Monaco Editor 是支持VS Code的代码编辑器 。描述代码编辑器功能的好页面在 这里。 它在 MIT 许可下获得许可，并支持 Edge、Chrome、Firefox、Safari 和 Opera。 移动浏览器或移动 Web 框架不支持 Monaco 编辑 器。 microsoft/monaco-editor代码仓库 二、使用步骤 引用依赖 package.json， 添加 "monaco-editor": "^0.21.2", "monaco-editor-webpack-
Monaco Editor编辑器教程（三二）：编辑器中有关事件的汇总，鼠标事件，内容变更，模型变更
知无涯
05-18 3843
在monaco 编辑器中，有很多事件，鼠标事件，滚动条事件，按键事件。鼠标事件中又区分点击，悬浮，移动事件，而点击事件又区分点击区域。本篇文章就来汇总地讲解一下Monaco编辑器汇总事件的用法以及相关API。
monaco-editor-esm-webpack-plugin
05-30
monaco-editor-esm-webpack-plugin 它依赖于 。 如果你想复制一个带有本地化的 monaco 编辑器，你可以看到 用于 monaco 编辑器的 webpack 插件，用于编译工作程序并处理本地化。 安装 npm install monaco-editor-...
react-monaco-editor:摩纳哥React的编辑器，它是react-monaco-editor和@ monaco-editorreact的组合
05-10
npm i @rimoe/react-monaco-editoryarn add @rimoe/react-monaco-editor与react-monaco-editor相比，您不需要配置webpack，因为我们使用的是与@ monaco-editor / react相同的可取消加载程序。 关于Monaco Editor的...
react-monaco-editor：摩纳哥的React编辑器
02-05
yarn add react-monaco-editor 与Webpack一起使用 import React from 'react' ; import { render } from 'react-dom' ; import MonacoEditor from 'react-monaco-editor' ; class App extends React . Component {
rollup-plugin-monaco-editor:用于导入摩纳哥编辑器的汇总插件
08-04
目前，这个插件支持monaco-editor@0.21.* ~ 0.26.* 。 以下版本已在本地测试： 0.21.2 0.22.3 0.24.0 0.25.0 0.26.1 用法 此插件应与其他插件一起使用。 包含 @rollup/plugin-node-resolve rollup-plugin-...
用于 React 的 Monaco Editor - 在任何 React 应用程序中使用 monaco-editor
06-08
@monaco-editor/react · Monaco Editor for React · 在任何 React 应用程序中使用 monaco-editor，无需使用 webpack（或 rollup/parcel/etc）配置文件/插件:high_voltage: 多模型编辑器已经支持； 享受它 :party_...
monaco-editor 简单使用
专注java二开部署
11-18 1628
Copy请注意安装包的版本号在vue.coinfig.js中增加如下配置： Copy Copy Copy在项目的目录下能看到支持的语言类型： Copy Copy Copy
ctrl+s保存在线文本，阻止不了浏览器默认事件
二二②四的小窝
12-01 1010
ctrl+s保存在线文本，阻止不了浏览器默认事件的原因 场景： 在浏览器环境中，编写一个在线IDE，支持用户键盘按下ctrl+s，能够保存编辑的文本内容。 环境： vue +monaco-editor 注意事项： 与键盘相关的事件有3个，分别是：keydown、keypress 、keyup。 这三个事件里面keydown是最先触发的，而且也只能在这个事件里面阻止事件冒泡和默认行为 所有我们把事件绑定在keydown上即可，再通过以下任意一种方式即可阻止浏览器的默认行为 event.p.
monaco-editor实现全局内容和文件搜索
weixin_34054931的博客
05-23 1042
写在前面 欢迎关注公众号：java开发高级进阶, 有不会的可以直接公众号留言提问 monaco-editor不提供全局搜索，只提供单个文件内的搜索，那么如何实现全局搜索呢？ 环境：Nodejs + React + Dva + monaco-editor + react-monaco-editor + antd 一、绑定快捷键 调用editor.addCommand方法绑定快捷键，通过monaco....
monaco editor各种功能实现总结
热门推荐
gao_grace的博客
03-29 7万+
添加删除断点
闲谈Monaco Editor-基本使用
飞翔的熊blabla
11-08 2万+
什么是Monaco Editor？ 微软之前有个项目叫做Monaco Workbench，后来这个项目变成了VSCode，而Monaco Editor（下文简称monaco）就是从这个项目中成长出来的一个web编辑器，他们很大一部分的代码（monaco-editor-core）都是共用的，所以monaco和VSCode在编辑代码，交互以及UI上几乎是一摸一样的，有点不同的是，两者的平台不一样，monaco基于浏览器，而VSCode基于electron，所以功能上VSCode更加健全，并且性能比较强大。
monaco-editor所有配置
云海梦尘的博客
09-03 1万+
官网API地址： https://microsoft.github.io/monaco-editor/api/modules/monaco.editor.html 直接前往 Const EditorOptions EditorOptions: { acceptSuggestionOnCommitCharacter: IEditorOption<acceptSuggestionOnCommitCharacter, boolean>; acceptSuggestionOnEnter: IEdito
Monaco editor 配置 language
qq_40058642的博客
05-22 1万+
在Monaco editor下有这个路径： \min\vs\basic-languages 即便在min的量级上，它里面也有30多种语言，包括C语言，C++，java，python。。。
monaco-editor vite vue3 如何使用 monaco-editor-nls
10-14
要在 monaco-editor 中使用 monaco-editor-nls，需要先安装 monaco-editor-nls 包，并在代码中引入对应的语言包。具体步骤如下： 1. 安装 monaco-editor-nls 包： ``` npm install monaco-editor-nls ``` 2. 在代码中引入对应的语言包，例如中文语言包： ```javascript import * as monaco from 'monaco-editor'; import zh from 'monaco-editor-nls/locale/zh-cn/main'; monaco.editor.defineTheme('myTheme', { base: 'vs', inherit: true, rules: [{ background: 'EDF9FA' }], colors: {}, }); monaco.editor.setTheme('myTheme'); monaco.languages.register({ id: 'javascript' }); monaco.languages.setMonarchTokensProvider('javascript', { tokenizer: { root: [], }, }); monaco.languages.registerCompletionItemProvider('javascript', { provideCompletionItems: () => { return { suggestions: [ { label: 'console', kind: monaco.languages.CompletionItemKind.Keyword, insertText: 'console', }, ], }; }, }); monaco.editor.create(document.getElementById('container'), { value: 'console.log("Hello, world!");', language: 'javascript', }); monaco.editor.setModelsLanguage([monaco.editor.getModels()[0]], 'javascript'); zh().then(() => { monaco.editor.setModelLanguage(monaco.editor.getModels()[0], 'javascript'); }); ```
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值