CodeMirror 5.62.3:滚动条、编辑器大小和换行问题

问题描述 投票:0回答:1

在编写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。

javascript html css scrollbar codemirror
1个回答
0
投票

经过大量调试,我发现了问题。

这个:

editor.setSize("50%", "100%");

不正确。我认为“100%”表示 HTML 文档的大小,但这是不正确的。为了达到相同的效果,我们需要使用
100vh
来代替:

editor.setSize("50%", "100vh");

© www.soinside.com 2019 - 2024. All rights reserved.