标签: monaco-editor
获得Monaco Editor的价值
微软最近开源了他们的摩纳哥编辑器(类似于ace/codemirror).
https://github.com/Microsoft/monaco-editor
我已经在浏览器中运行并运行了,但仍然无法弄清楚如何获取编辑器的当前文本,就像我想要保存它一样.
例:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
</head>
<body>
<div id="container" style="width:800px;height:600px;border:1px solid grey"></div>
<script src="monaco-editor/min/vs/loader.js"></script>
<script>
require.config({ paths: { 'vs': 'monaco-editor/min/vs' }});
require(['vs/editor/editor.main'], function() {
var editor = monaco.editor.create(document.getElementById('container'), {
value: [
'function x() {',
'\tconsole.log("Hello world!");',
'}'
].join('\n'),
language: 'javascript'
});
});
function save() {
// how do I get the value/code inside the editor?
var value = "";
saveValueSomewhere(value);
}
</script>
</body>
</html>
推荐指数
解决办法
查看次数
在Monaco编辑器中对自定义语言进行语法验证
我正在尝试将自定义语言集成到monaco编辑器中,然后我通过https://microsoft.github.io/monaco-editor/monarch.html了解语法突出显示.
但我找不到任何关于我们如何通过语法验证添加错误/警告验证的文档.在Ace编辑器中,我们通过编写工作程序并在其中执行验证功能来完成此操作.感谢任何关于此的链接/帮助.
推荐指数
解决办法
查看次数
摩纳哥编辑 - 如何使一些领域只读
我正在尝试以一种文本内容的某些区域是只读的方式配置Monaco编辑器.更准确地说,我希望第一行和最后一行是只读的.示例如下:
public something(someArgument) { // This is readonly
// This is where the user can put his code
// more user code...
} // readonly again
我已经用Ace编辑器做了类似的事情,但我无法想办法用摩纳哥做到这一点.有一个ModelContentChangedEvent你可以注册一个监听器,但它发生了变化后被触发(所以为时已晚,以防止任何事情).有更多摩纳哥经验的人是否知道如何做到这一点？
提前致谢!
推荐指数
解决办法
查看次数
来自多个文件的摩纳哥编辑器智能感知
我正在使用 monaco-editor，我想包含来自多个文件的建议。我不确定什么是最好的方法，但基本上，我希望当我在 file2.js 中导出一些函数时，能够从建议中的另一个 file1.js 访问它。
关于如何实现这一目标的任何想法？谢谢 ！
文件 1
var express = require('express');
var pug = require('pug');
var config = require('./config');
var fs = require('fs');
var router = express.Router();
var utils = require('/utils');
// Here I would like to use the function newTest from the other file
but it does not show in the suggestions
router.get('/', function (req, res) {
console.log("ip - ", req.connection.remoteAddress)
res.send(pug.compileFile('views/main.pug')({
config
}))
});
module.exports = router;
文件 2
function newTest() {
}
module.exports.newTest = …推荐指数
解决办法
查看次数
始终在 monaco-editor 中显示“显示更多”部分
我正在使用Configure javascript defaultsmonaco editor playground 中的示例。
当我开始输入预定义的类时，我会自动完成，但我需要按一次 ctl+space 来查看建议的实际文档。
有没有办法默认设置此选项，以便自动完成默认情况下显示文档打开？
这是我在代码中更改的唯一内容：
monaco.languages.typescript.typescriptDefaults.addExtraLib([
'/**',
' * Know your facts!',
' */',
'declare class Facts {',
' /**',
' * Returns the next fact',
' */',
' static next():string',
'}',
].join('\n'), 'filename/facts.d.ts');
它现在如何打开：
我希望它如何默认打开：
推荐指数
解决办法
查看次数
在 Angular 13 中实现 Monaco 编辑器
在 Angular 13 中实现 Monaco 编辑器的最佳选项是什么？\n我见过 ngx-monaco-editor，但上次更新是 9 个月后，它\xe2\x80\x99s 升级到 Angular 12，Monaco 版本也有 0.20。 0 (11.02.2020)，非常旧:(\n是否有另一种方法可以在 Angular 13 中使用它？
\n推荐指数
解决办法
查看次数
如何在Monaco编辑器中插入文本？
我的应用程序中嵌入了摩纳哥代码编辑器.
如何以编程方式在特定行上插入文本？
var editor = monaco.editor.create(document.getElementById("container"), {
value: "// First line\nfunction hello() {\n\talert('Hello world!');\n}\n// Last line",
language: "javascript",
lineNumbers: false,
roundedSelection: false,
scrollBeyondLastLine: false,
readOnly: false,
theme: "vs-dark",
});
// how do I do this?
editor.insertText("FOO");
推荐指数
解决办法
查看次数
摩纳哥编辑matchBrackets不突出
推荐指数
解决办法
查看次数
如何从像 cdnjs 这样的 CDN 运行 Monaco 编辑器？
我正在努力寻找一个仅从 CDN 运行的最小可运行示例，而不是主要使用本地服务器的现有树内示例。
推荐指数
解决办法
查看次数
如何创建多个摩纳哥 JavaScript 编辑器，使它们不共享全局命名空间？
我希望一个页面上有多个 Monaco 编辑器，但每个编辑器都有自己的一组全局变量。在一个编辑器中创建的变量不应该在另一个编辑器中作为类型使用。
我尝试过设置monaco.languages.typescript.javascriptDefaults.setCompilerOptions({isolatedModules: true})，但这似乎并没有影响这些共享的全局类型。
如何创建多个 monaco javascript 编辑器，以便它们不共享全局命名空间？
// set up code for the Monaco Playground:
const container = document.getElementById("container");
const container1 = document.createElement("div");
const container2 = document.createElement("div");
container1.style.height="200px";
container1.style.border = "solid 2px black";
container1.style.marginBottom = "16px";
container2.style.height="200px";
container2.style.border = "solid 2px black";
container.appendChild(container1);
container.appendChild(container2);
// actual code:
monaco.editor.create(container1, {
model: monaco.editor.createModel(`const abc = 123;`,
"javascript",
monaco.Uri.parse("js:editor1.js")
)
});
monaco.editor.create(container2, {
model: monaco.editor.createModel(
"const value = abc; // should be typed as `any`, but is typed as …推荐指数
解决办法
查看次数