Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
479 views
in Technique[技术] by (71.8m points)

javascript - Codemirror和Xtext-自动补全弹出窗口不显示(Codemirror and Xtext - Autocompletion popup not showing)

I'm working on a DSL and try to customize the webEditor.

(我正在使用DSL,并尝试自定义webEditor。)

Using the editor works fine as well as the autocompletion when called manually with "Ctrl + Space".

(当使用“ Ctrl +空格”手动调用时,使用编辑器和自动补全功能一样好。)

Now it would be handy if hinting would be called after any keyup.

(现在,如果在任何键入之后都调用提示,将很方便。)

I found several possible solutions here.

(我在这里找到了几种可能的解决方案。)

Unfortunately, the pop-up window is not shown (but log messages are shown).

(不幸的是,没有显示弹出窗口(但显示了日志消息)。)

Here is my code:

(这是我的代码:)

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

Nothing fancy happens here, I just try to get the autocompletion after any keyup to work.

(这里没有任何幻想,我只是尝试在进行任何键盘输入后获得自动完成功能。)

  ask by orangeblend translate from so

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

Just as @Christian Dietrich recommended, I tried the default project (a bit modificated to show a list of possible autocompletions).

(就像@Christian Dietrich推荐的那样,我尝试了默认项目(进行了一些修改以显示可能的自动填充列表)。)

Unfortunately this results to the same result.

(不幸的是,这导致了相同的结果。)

Calling autocompletion via "Ctrl + Space" shows the correct list of possible autocompletions but typing anything just creates log messages.

(通过“ Ctrl +空格”调用自动完成功能会显示可能的自动完成功能的正确列表,但键入任何内容只会创建日志消息。)

The first image shows that autocompletion works: intended result .

(第一张图片显示了自动完成功能: 预期结果 。)

The second shows the log messages when typing anything: 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>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...