在编写HTML/CSS/JS时,我确实需要CodeMirror作为代码编辑器部分(我选择C#作为编辑器的语言模式;您可以忽略编辑器中的代码)。我在使用 CodeMirror 版本 5.62.3 时面临的问题是,我希望出现滚动条。然而,编辑器的大小有点可疑,因为我希望它的高度为 100%(以便与 HTML 文档的大小相同),但它看起来根本不像 100%,而且滚动条确实显示出来,但它是完全静态的。所以当我尝试滚动时,它永远不会滚动。
也许这是 CodeMirror 的不稳定版本,或者可能是我的浏览器出现故障,我不知道。这是因为不仅存在大小和滚动条静态的问题,而且即使我用鼠标滚动它也不会滚动,而且换行也没有效果。滚动的唯一方法是滚动整个 HTML 文档,这不是我想要的。
如果有一个非常明显的方法来解决这个问题,我很抱歉。尽管我已经阅读了一些文档,但我并没有真正理解CodeMirror的完整功能。我找不到任何相关信息,所以请记住这一点。
我将粘贴完整的 HTML 页面。这是因为它包含我们调试问题和查看代码所需的所有内容,并且没有与问题无关的其他不需要的代码。请记住,我必须将项目名称重命名为“something”。
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.3/codemirror.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.3/codemirror.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.3/mode/clike/clike.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.3/theme/monokai.min.css">
<title>something</title>
<style>
.CodeMirror {
line-height: 28px;
font-family: Lucida Console;
overflow: auto;
height: 100%;
}
</style>
</head>
<body>
<div id="editor"></div>
<script>
var editor = CodeMirror(document.getElementById("editor"), {
mode: "text/x-csharp",
lineNumbers: true,
indentUnit: 4,
tabSize: 4,
theme: "monokai",
lineWrapping: true,
value: `// Welcome to something!\n// something allows you to test out C# and MSIL online.\n\n// x is supported!\n// You can run x and x for fully free.\n\// You can do so by going into the gear icon on the right.\n\n// something is still in beta!\n// So expect some classes, methods, or properties not yet to be implemented.
\n// Note: something is not any associated with Microsoft.\n\n// Happy coding! :)\n\nusing System;\n\nnamespace Solution1\n{\n internal sealed class Program\n {\n internal static void Main(string[] args)\n {\n Console.WriteLine("Demo test app!");\n Environment.Exit(0);\n }\n }\n}`
});
editor.setSize("50%", "100%");
</script>
</body>
</html>
尝试在编辑器中滚动并使用滚动条。那是行不通的。
我使用的是最新版本的 Google Chrome - chrome 116。
我感谢任何帮助或建议。
此外,值得一提的是我没有使用 Node.js。例如,我通过 CDN 加载所有 JavaScript 库。
最诚挚的问候, -winscripter。
经过大量调试,我发现了问题。
这个:
editor.setSize("50%", "100%");
100vh
来代替:
editor.setSize("50%", "100vh");