ngx-monaco-editor(源代码编辑器)无法显示的问题

最新推荐文章于 2024-08-16 08:06:03 发布
原创 最新推荐文章于 2024-08-16 08:06:03 发布 · 1.9k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

我这边项目使用的是ng7,ngx-monaco-editor版本也是7.0.0
官方地址: https://www.npmjs.com/package/ngx-monaco-editor
照着npm ngx-monaco-editor搞了一顿操作但都没有出来
后来发现是因为忽略了在angular.json中进行配置的这一步
在这里插入图片描述
PS:过程中还遇到了一个 Class MonacoEditorModule if not an Angular module 的 问题
在这里插入图片描述
解决方法是使用forRoot引入
在这里插入图片描述

希望能帮到遇到相同问题的朋友

Monaco Editor教程：编辑器自动完成建议项的配置详解
TechRoar的博客
09-20 626
通过注册自动完成建议项的提供程序并返回包含建议项的对象，您可以在编辑器中实现代码自动完成的功能。在示例中，当您输入"con"时，将显示一个建议项"console"，当您输入"lo"时，将显示一个建议项"log"。请注意，以上示例中的Monaco Editor脚本链接使用的是CDN提供的资源，如果您希望在生产环境中使用，建议将脚本文件下载到本地并相应地修改链接。在上述代码中，我们引入了Monaco Editor的脚本文件，并在脚本中创建了一个编辑器实例。这是一个基本的自动完成建议项的配置示例。
monaco-json:摩纳哥编辑器的JSON语言支持
05-06
摩纳哥JSON 摩纳哥编辑器的JSON语言插件。 编辑JSON文件时，它提供以下功能： 基于JSON模式或通过查看同一文件中的相似对象的代码完成 悬停，基于JSON模式 验证：语法错误和架构验证 格式设定 文件符号 语法高亮 匹配包含以下format: "color-hex"'的模式的所有属性的颜色修饰符format: "color-hex"' （非标准模式扩展名） 架构可以通过配置来提供。 请参阅以获取JSON插件提供的用于配置JSON语言支持的API。 JSON插件在内部使用节点模块，提供上述功能的实现。 也使用同一模块来增强JSON编辑体验。 问题 请在有关monaco-json问题。 正在安装 此npm模块捆绑并分发在npm模块中。 发展 git clone https://github.com/Microsoft/monaco-json npm install . 用
使用ngx-monaco-editor不显示
白白白桃乌龙的博客
06-05 1184
用ngx-monaco-editor的时候出现问题，跟着git步骤走但却不显示组件，也不报错。用百度搜了下ngx-monaco-editor，都是抄来抄去一样的解决办法, 还没用。 这里摆上我的解决方法： (本人版本是angular:8, ng-zorro-antd:8.5.2, ng-alain:8.9.0, ngx-monaco-editor: 8.0.0) angular.json: { "glob": "**/*", .
解决 Monaco Editor 添加自定义提示后导致内置单词消失问题
qq_17209641的博客
10-22 2538
像这样添加自定义提示后，内置单词提示消失了 this.monaco.languages.registerCompletionItemProvider('javascript', { provideCompletionItems: function(model, position) { // var textUntilPosition = model.getValueInRange({startLineNumber: position.lineNumber, startColumn: 1, e
【解决方案】LeetCode中的Monaco编辑器无法加载
一起加油~
07-18 1267
解决LeetCode中Moncao编辑器无法加载的问题。
vue3+vite中使用Monaco Editor
qq_43049525的博客
07-05 2110
新项目里面要用到monaco-editor，因为是vue3和vite出现了一些问题，这边记录一下。
精选资源
ngx-monaco-editor：Angular 2及更高版本的Monaco编辑器组件
01-31
npm install ngx-monaco-editor@6.0.0 --save 将glob添加到.angular-cli.json模式中的资产.angular-cli.json projects.[project-name].architect.build （以使monaco-editor lib可用于该应用程序）： { "options...
Angular-ngx-monaco-editor.zip
09-18
Angular-ngx-monaco-editor.zip,角度2和角度2以上的摩纳哥编辑器组件和角度2和角度2以上的摩纳哥编辑器组件。,Angularjs于2016年发布，是Angularjs的重写版。它专注于良好的移动开发、模块化和改进的依赖注入。...
ngx-monaco-editor：Angular各版本Monaco编辑器集成指南
**ngx-monaco-editor** 是一个专门用于Angular平台的组件库，它允许开发者在Angular 2及更高版本的应用中嵌入Monaco编辑器。Monaco编辑器是微软开源的编辑器，广泛应用于VS Code中，支持多种编程语言的语法高亮、...
ngx-monaco-editor: Angular v6+ 的摩纳哥编辑器集成库
资源摘要信息:"ngx-monaco-editor是一个专门为Angular v6及更高版本提供的编辑器库，它基于摩纳哥编辑器（Monaco Editor），后者是VS Code所使用的编辑器，支持代码高亮、自动补全、代码折叠等多种功能。该库允许...
monaco-editor 实现SQL编辑器
qq_43156442的博客
06-07 1095
base: 'vs', // 以哪个默认主题为基础："vs" | "vs-dark" | "hc-black" | "hc-light"rules: [// 高亮规则，即给代码里不同token类型的代码设置不同的显示样式],colors: {'scrollbarSlider.background': '#edcaa6', // 滚动条背景'editor.foreground': '#0d0b09', // 基础字体颜色。
monacoeditor一个基于浏览器的代码编辑器
08-10
一个基于浏览器的代码编辑器，采用VS Code开发
vue3使用monaco editor踩坑记——getValue()导致页面卡住
weixin_43977534的博客
01-07 7114
vue3使用monaco editor，调用getValue()方法卡住！vue3踩坑记！
VS Code 编辑器： Monaco Editor 介绍
顺其自然~专栏
04-18 1万+
Any application that can be written inJavaScript, will eventually be written inJavaScript. --Atwood's Law 任何可以用JavaScript来写的应用，最终都将用JavaScript来写。--阿特伍德定律 Monaco Editor 是一个浏览器端的代码编辑器库，同时它也是 VS Code 所使用的编辑器。Monaco Editor 可以看作是一个编辑器控件，只提供了基础的编辑器与语言相...
闲谈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编辑器：自定义DOM区域
DevPulse的博客
09-10 598
这个功能可以让开发人员创建一个可自定义的区域，可以用来实现各种功能，例如在代码中添加注释、展示语法高亮、显示内联错误等。在本文中，我们将学习如何使用Monaco Editor的changeViewZones API来创建自定义DOM区域。我们将通过实例演示如何创建一个简单的自定义DOM区域，展示一个提示框，当用户将鼠标悬停在编辑器的某个区域时会显示出来。总之，使用Monaco Editor的changeViewZones API可以让我们创建一个自定义的DOM区域，以实现各种功能。
ngx-monaco-editor 使用教程
最新发布
gitblog_01107的博客
08-16 1138
ngx-monaco-editor 使用教程 项目介绍 ngx-monaco-editor 是一个为 Angular 应用提供 Monaco Editor 支持的开源库。Monaco Editor 是微软开发的一款强大的代码编辑器，广泛用于 Visual Studio Code 中。ngx-monaco-editor 使得在 Angular 项目中集成 Monaco Editor 变得简单快捷。 ...
monaco-eidtor vue项目中使用编辑器
m0_50853977的博客
11-15 1394
需求：想要实现一个类似vscode中代码对比的功能 问了大佬，大佬说monaco-eidtor会比较好用一些，于是在项目中就使用了monaco-eidtor这个编辑器 monaco-eidtor 微软之前有个项目叫做Monaco Workbench，后来这个项目变成了VSCode，而Monaco Editor（下文简称monaco）就是从这个项目中成长出来的一个web编辑器，所以monaco和VSCode在编辑代码，交互以及UI上几乎是一摸一样的，只不过vscode性能、功能上更强大健全。 使用 安装 n
获取焦点后，样式异常的处理方法
weixin_42863883的博客
11-30 539
难点：上面问题的难点在于，想要通过控制台查看问题标签样式结构时，就会失焦，提示框就会消失，无法看到问题标签内部结构。最终发现情况二的问题，样式被改写了，内部的样式类与外部的样式类同名，修改外部的样式类名解决的；在使用monaco-editor 设置代码提示未正常显示，提示框出现，看不到内容，如图。所有这种获取焦点后展示异常的问题都可以用这种方式解决。情况一：没有得到数据，所以没有展示；情况二：得到了数据，展示异常；
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值