Fatal编程技术网
  • javascript/
  • Javascript Codemirror和Xtext-未显示自动完成弹出窗口

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

javascript autocomplete

Javascript Codemirror和Xtext-未显示自动完成弹出窗口,javascript,autocomplete,xtext,codemirror,hint,Javascript,Autocomplete,Xtext,Codemirror,Hint,我正在开发DSL，并尝试自定义webEditor。 当使用“Ctrl+Space”手动调用时，使用编辑器可以很好地完成自动完成。 现在，如果在任何键控后调用暗示，这将非常方便。我在这里找到了几种可能的解决办法。不幸的是，弹出窗口没有显示（但会显示日志消息） 这是我的密码： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http

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

这是我的密码：

<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>


示例Web编辑器
var baseUrl=window.location.pathname；
var fileIndex=baseUrl.indexOf（“index.html”）；
如果（文件索引>0）
baseUrl=baseUrl.slice（0，fileIndex）
require.config({
baseUrl:baseUrl，
路径：{
“jquery”：“webjars/jquery/3.3.1-1/jquery.min”，
“xtext/xtext代码镜像”：“xtext/2.17.0/xtext代码镜像”
},
套餐：[{
名称：“codemirror”，
位置：“webjars/codemirror/5.41.0”，
主：“库/代码镜像”
} ]
});
需要（[“xtext/xtext codemirror”]，函数（xtext）{
var editor=xtext.createEditor（）；
on（'inputRead'，函数onChange（编辑器，输入）{
console.log（“嘿”）；
CodeMirror.commands.autocomplete（编辑器）；
});
});
这里没有什么奇怪的事情发生，我只是试着在任何按键启动后自动完成

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

第一幅图显示自动完成的工作原理：。 第二个显示键入任何内容时的日志消息：


示例Web编辑器
var编辑器=null；
var baseUrl=window.location.pathname；
var fileIndex=baseUrl.indexOf（“index.html”）；
如果（文件索引>0）
baseUrl=baseUrl.slice（0，fileIndex）；
require.config({
baseUrl:baseUrl，
路径：{
“jquery”：“webjars/jquery/3.4.1/jquery.min”，
“xtext/xtext代码镜像”：“xtext/2.19.0/xtext代码镜像”
},
套餐：[{
名称：“codemirror”，
位置：“webjars/codemirror/5.41.0”，
主：“库/代码镜像”
}]
});
require（[“xtext-resources/generated/mode-mydsl5”，“xtext/xtext-codemirr”]，函数（mode，xtext）{
编辑器=xtext.createEditor({
baseUrl:baseUrl
});
on（'inputRead'，函数onChange（编辑器，输入）{
console.log（“嘿”）；
CodeMirror.commands.autocomplete（编辑器）；
});
});
示例MyDsl5 Web编辑器
正如@Christian Dietrich建议的那样，我尝试了默认项目（稍微修改以显示可能的自动完成列表）。不幸的是，这导致了同样的结果。通过“Ctrl+Space”调用autocompletion会显示可能的自动完成的正确列表，但键入任何内容都只会创建日志消息

第一幅图显示自动完成的工作原理：。 第二个显示键入任何内容时的日志消息：


示例Web编辑器
var编辑器=null；
var baseUrl=window.location.pathname；
var fileIndex=baseUrl.indexOf（“index.html”）；
如果（文件索引>0）
baseUrl=baseUrl.slice（0，fileIndex）；
require.config({
baseUrl:baseUrl，
路径：{
“jquery”：“webjars/jquery/3.4.1/jquery.min”，
“xtext/xtext代码镜像”：“xtext/2.19.0/xtext代码镜像”
},
套餐：[{
名称：“codemirror”，
位置：“webjars/codemirror/5.41.0”，
主：“库/代码镜像”
}]
});
require（[“xtext-resources/generated/mode-mydsl5”，“xtext/xtext-codemirr”]，函数（mode，xtext）{
编辑器=xtext.createEditor({
baseUrl:baseUrl
});
on（'inputRead'，函数onChange（编辑器，输入）{
console.log（“嘿”）；
CodeMirror.commands.autocomplete（编辑器）；
});
});
示例MyDsl5 Web编辑器
您确定已将codemirror webjar添加到pom/build.gradle中吗？浏览器控制台是否显示任何错误？我已将所有依赖项添加到pom中。一切正常，我没有任何错误。如上所述，日志消息也正确显示。如果我键入任何内容，则仅自动完成的弹出窗口不会显示。只有当我通过“Ctrl+Space”调用它时，如果您删除index.html并添加
webSupport={framework=“codemirr”}，您的html看起来与xtext有点不同，您才会生成它
对于工作流，我也不知道您是否有一个语法可以为您正在测试的位置生成内容辅助。我删除了旧索引，但仍然是原来的索引。此外，生成的一个和我的之间的变化也很小。您所说的生成内容辅助的语法是什么意思？因为我可以用快捷方式调用暗示，所以必须生成一个内容辅助-或者我错了吗？你确定你将codemirror webjar添加到pom/build.gradle中了吗？浏览器控制台是否显示任何错误？我将所有依赖项添加到pom中了。一切正常，我没有任何错误。如上所述，日志消息也正确显示。如果我键入任何内容，则仅自动完成的弹出窗口不会显示。只有当我通过“Ctrl+Space”调用它时，你的html看起来才有点不同 
<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>