个人中心
文章发布
退出
作者热门文章
- xml - AJAX/Jquery XML 解析
- 具有多重继承的 XML 模式
- .net - 枚举序列化 Json 与 XML
- XML 简单类型、简单内容、复杂类型、复杂内容
25
4
我想制作一个非常简单的 Monaco Editor :JSBin :
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<style>
.me {
height: 100vh;
}
</style>
</head>
<body>
<div class="me" id="container"></div>
<script src="https://www.matrixlead.com/monaco-editor/min/vs/loader.js"></script>
<script>
require.config({ paths: { 'vs': 'https://www.matrixlead.com/monaco-editor/min/vs' }})
require(["vs/editor/editor.main"], function () {
var editor = monaco.editor.create(document.getElementById('container'), {
value: 'function x() {\n\tconsole.log("Hello world!");\n}',
language: 'javascript',
minimap: { enabled: false },
scrollBeyondLastLine: false
});
});
</script>
</body>
</html>
当我在 Chrome 中看到它并上下滚动时，整个窗口都有一个滚动条。好像是因为编辑器的高度大于窗口的高度。我只是不想看到任何滚动条。有谁知道如何实现这一点？
编辑 1:在 Safari 10.1.2 中使用 height: calc(100% - 24px)
解决方案:
在答案的帮助下，这是适合我的解决方案:
1) 我们需要在独立的 html 文件中而不是在 JSBin 中进行测试
2)关键是使用overflow: hidden
3) 因此，下面的代码在上下滚动时不会产生任何滚动条，当代码较长时底部没有隐藏行:
<html>
<style>
body {
overflow: hidden;
}
.myME {
height: 100%
}
</style>
<body>
<div class="myME" id="container"></div>
<script src="https://www.matrixlead.com/monaco-editor/min/vs/loader.js"></script>
<script>
require.config({ paths: { 'vs': 'https://www.matrixlead.com/monaco-editor/min/vs' }})
require(["vs/editor/editor.main"], function () {
var editor = monaco.editor.create(document.getElementById('container'), {
value: 'function x() {\n\tconsole.log("Hello world!");\n}',
language: 'javascript',
minimap: { enabled: false },
automaticLayout: true,
scrollBeyondLastLine: false
});
});
</script>
</body>
</html>
最佳答案
我相信只要将正文的边距和填充设置为 0，并将 .me 的溢出设置为隐藏，它就可以工作。
.me {
height: 100vh;
overflow: hidden;
}
body {
margin: 0;
padding: 0;
}
这不会导致底部的线条不可见，因为 monaco 会为您处理滚动。
事实上，您获得 native 滚动条只是因为这与摩纳哥实现滚动内容的方式有关。将编辑器容器的溢出设置为隐藏即可正常工作。
P.S 请记住，当您调整窗口大小时，编辑器的大小不会改变，因此您必须检测调整大小并手动调用 editor.layout()。
关于javascript - Monaco Editor 的高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45654579/
25
4
0
我添加了我的语言并按照此处的说明进行构建 https://github.com/Microsoft/monaco-languages npm run prepublish 这会输出一个包含 dev、e
您可以使用 monaco.languages.typescript.typescriptDefaults.addExtraLib 添加您在 TypeScript 解析期间可能需要的任何 *.d.ts
我正在使用 monaco-editor，我看到在更高版本的上下文菜单中添加了剪切和复制。我想从上下文菜单中删除这两个选项。请让我知道我怎样才能实现它？ 最佳答案 使用 CSS 隐藏单个项目 我在浏览器
我正在 monaco-editor 中定义新语言.我希望它会自动突出显示匹配的括号和圆括号，因为默认情况下 matchBrackets选项是真的。 我还需要做些什么吗？ 示例代码: 看 this pa
我正在尝试在我目前正在开发的项目中使用 Microsoft 的 Monaco Editor。我查看了文档，发现您可以使用自定义代码完成和语法突出显示来设置自定义语言，但我找不到任何关于如何向自定义语言
有没有办法将插入符号位置作为源代码字符串中的索引？ 我知道我可以获得位置，它会给我一个包含行和列的对象，但是有没有办法获取或将行 + 列转换为字符串字符索引？ 例如，如果我有: using Syste
默认为 CRLF。我想在处理 BASH 脚本时将其更改为 LF。请帮忙。 我已经浏览了文档，但找不到任何解决方案或示例。 最佳答案 //https://github.com/Microsoft/vsc
将任何回调附加到 editor.onDidChangeModelContent(event) 到 Monaco 实例后，如何删除(或取消绑定(bind))此函数？ 例如，ACE 编辑器提供了 func
我正在使用 monaco-editor 库为自定义编程语言实现网络编辑器。 我已经实现了一个 CompletionItemProvider 来提供自定义完成建议。 总的来说效果很好。但是，在执行片段时
我正在使用 monaco-editor，我想包含来自多个文件的建议。我不确定最好的方法是什么，但基本上，我希望当我在 file2.js 中导出一些函数时，能够从建议中的另一个 file1.js 访问它
我正在为我的应用程序添加 TypeScript 支持 Data-Forge Notebook . 它是一个笔记本风格的 JavaScript 应用程序。当我在代码单元格中使用“等待”关键字时，摩纳哥将
Monaco Editor 中是否有用于文本选择的事件？ 我需要响应用户在编辑器中选择部分代码？ 有没有更好的解决方案来使用计时器来获取选择范围？ 文件似乎没有提到它。 最佳答案 您可以使用 onDi
我正在使用 monaco-editor 来显示本地代码文件的内容，这些文件可能是用各种语言编写的，所以我想知道如何根据文件的扩展名或文件的第一行动态设置/更改 monaco 编辑器的语言没有扩展名(如
在 Monaco Editor 中，使用标准初始化，例如: monaco.editor.create(document.getElementById("container"), { value
我刚刚开始研究将 Monaco 用作我们内部代码游乐场的编辑器。而且我无法弄清楚如何为编辑器窗口中的文本更改(通过键入、粘贴或删除)创建处理程序。对于上下文，使用 CodeMirror 编辑器，我只是
是否可以完全隐藏 Monaco Editor 的装订线。 我尝试了以下选项: lineNumbers: 'off', glyphMargin: false, folding: false
将“enableSchemaRequest”选项设置为“false”时，我收到警告: Unable to load schema from '/do.not.load.me'. No schema r
我正在构建并排预览，因此我需要在编辑器中获取最上面的可见行号。 我想我可以获得顶部像素滚动条: editor.onDidScrollChange(function (e) { consol
是否可以在 Monaco Editor 中获得拆分 Pane ？类似于 VSCode 中所做的或摩纳哥本身提供的 Diff Editor 中使用的内容。 最佳答案 您必须在像这样的编辑器之间共享模型
我正在使用 Monaco Editor 来编辑 typescript 。有没有办法获得当前模型的 AST？是否可以修改树以便编辑器对更改使用react？即我想为 typescript 做简单的重构工具
我是一名优秀的程序员,十分优秀！