Codemirror 和 Xtext - 自动完成弹出窗口未显示答案

【问题标题】：Codemirror and Xtext - Autocompletion popup not showingCodemirror 和 Xtext - 自动完成弹出窗口未显示
【发布时间】：2020-03-24 01:43:27
【问题描述】：

我正在开发 DSL 并尝试自定义 webEditor。当使用“Ctrl + Space”手动调用时，使用编辑器以及自动完成功能都可以正常工作。现在，如果在任何 keyup 之后调用提示会很方便。我在这里找到了几种可能的解决方案。不幸的是，没有显示弹出窗口（但显示了日志消息）。

这是我的代码：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="en-us">
<title>Example Web Editor</title>

<link rel="stylesheet" type="text/css" href="webjars/codemirror/5.41.0/lib/codemirror.css" />
<link rel="stylesheet" type="text/css" href="xtext/2.17.0/xtext-codemirror.css" />
<link rel="stylesheet" type="text/css" href="webjars/codemirror/5.41.0/addon/hint/show-hint.css" />

<script type="text/javascript" src="webjars/codemirror/5.41.0/lib/codemirror.js"></script>
<script type="text/javascript" src="webjars/codemirror/5.41.0/addon/hint/show-hint.js"></script>
<script src="webjars/requirejs/2.3.6/require.min.js"></script>

<script type="text/javascript"> 
    var baseUrl = window.location.pathname;
    var fileIndex = baseUrl.indexOf("index.html");
    if (fileIndex > 0)
        baseUrl = baseUrl.slice(0, fileIndex)
    require.config({
        baseUrl : baseUrl,
        paths : {
            "jquery" : "webjars/jquery/3.3.1-1/jquery.min",
            "xtext/xtext-codemirror" : "xtext/2.17.0/xtext-codemirror"
        },
        packages : [ {
            name : "codemirror",
            location : "webjars/codemirror/5.41.0",
            main : "lib/codemirror"
        } ]
    });

    require([ "xtext/xtext-codemirror" ], function(xtext) {
        var editor = xtext.createEditor();

        editor.on('inputRead', function onChange(editor, input) {
            console.log("hey");
            CodeMirror.commands.autocomplete(editor);
        });
    });
</script>


</head>
<body>
    <div class="content">
        <div id="xtext-editor" data-editor-xtext-lang="adv"></div>
    </div>
</body>
</html>

这里没有什么特别的事情发生，我只是尝试在任何按键操作后自动完成。

【问题讨论】：

您确定已将 codemirror webjar 添加到 pom/build.gradle 中吗？
浏览器控制台是否显示任何错误？
我在 pom.xml 中添加了所有依赖项。一切正常，我没有收到任何错误。如前所述，日志消息也正确显示。如果我输入任何内容，则只有自动完成的弹出窗口不会显示。只有当我通过“Ctrl + Space”调用它时
如果您删除 index.html 并将 webSupport= { framework="CODEMIRROR" } 添加到工作流中，您的 html 看起来与 xtext 生成的有点不同我也不知道您是否有一个语法可以产生内容辅助您正在测试的地方
我删除了旧索引，但还是一样。生成的和我的之间的变化也很小。产生内容辅助的语法是什么意思？由于我可以使用快捷方式调用提示，因此必须生成内容辅助 - 还是我错了？

标签： javascript autocomplete xtext codemirror hint

【解决方案1】：

正如@Christian Dietrich 推荐的那样，我尝试了默认项目（稍作修改以显示可能的自动完成列表）。不幸的是，这导致了相同的结果。通过“Ctrl + Space”调用自动完成会显示可能的自动完成的正确列表，但输入任何内容只会创建日志消息。

第一张图片显示自动完成功能有效：intended result。第二个显示输入任何内容时的日志消息：actual result。

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Content-Language" content="en-us">
    <title>Example Web Editor</title>
    <link rel="stylesheet" type="text/css" href="webjars/codemirror/5.41.0/lib/codemirror.css" />
    <link rel="stylesheet" type="text/css" href="webjars/codemirror/5.41.0/addon/hint/show-hint.css" />
    <link rel="stylesheet" type="text/css" href="xtext/2.19.0/xtext-codemirror.css" />
    <link rel="stylesheet" type="text/css" href="style.css" />

    <script type="text/javascript" src="webjars/codemirror/5.41.0/lib/codemirror.js"></script>
    <script type="text/javascript" src="webjars/codemirror/5.41.0/addon/hint/show-hint.js"></script>

    <script src="webjars/requirejs/2.3.6/require.min.js"></script>
    <script type="text/javascript">
        var editor = null;
        var baseUrl = window.location.pathname;
        var fileIndex = baseUrl.indexOf("index.html");
        if (fileIndex > 0)
            baseUrl = baseUrl.slice(0, fileIndex);
        require.config({
            baseUrl: baseUrl,
            paths: {
                "jquery": "webjars/jquery/3.4.1/jquery.min",
                "xtext/xtext-codemirror": "xtext/2.19.0/xtext-codemirror"
            },
            packages: [{
                name: "codemirror",
                location: "webjars/codemirror/5.41.0",
                main: "lib/codemirror"
            }]
        });
        require(["xtext-resources/generated/mode-mydsl5", "xtext/xtext-codemirror"], function (mode, xtext) {
            editor = xtext.createEditor({
                baseUrl: baseUrl
            });

            editor.on('inputRead', function onChange(editor, input) {
                console.log("hey");
                CodeMirror.commands.autocomplete(editor);
            });
        });
    </script>
</head>

<body>

    <div class="container">
        <div class="header">
            <h1>Example MyDsl5 Web Editor</h1>
        </div>
        <div class="content">
            <div id="xtext-editor" data-editor-xtext-lang="mydsl5"></div>
        </div>
    </div>

</body>

</html>

【讨论】：

您遇到的实际问题是什么？你想要自动内容辅助吗？
我不确定codemirror是否支持（内容辅助是crtl+space）
我的问题是：我想在任何键盘输入后获得内容协助。 Contentassit 有效，但我不想手动调用它。所以是的，我想要自动内容辅助（那么为什么 editor.on() 不能按预期工作）
我猜想在stackoverflow.com/questions/13744176/… 的描述之后是有可能的。这几乎就是我所做的。编辑器会注意到 inputRead，因此如果输入了任何字符。唯一剩下的就是打开自动完成列表。你可能知道它是如何通过 "Strg + Space" 调用的吗？那么调用什么函数。可以在“inputRead”之后调用这个函数（这是我想到的唯一解决方法）
默认的 showHint 函数在 xtext-codemirror.js 中定义。调用 contentAssistService 似乎是正确的方法（至少我以某种方式管理它，通过键入显示自动完成）。不幸的是，它还没有完全按照我的意愿工作。但一旦我设法让它发挥作用，我就会在这里发布答案。