javascript - Codemirror 和 Xtext - 自动完成弹出窗口未显示
问题描述
我正在研究 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>
这里没有什么特别的事情发生,我只是尝试在任何按键工作后获得自动完成功能。
解决方案
正如@Christian Dietrich 推荐的那样,我尝试了默认项目(稍作修改以显示可能的自动完成列表)。不幸的是,这导致了相同的结果。通过“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="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>
推荐阅读
- android - Flutter:按下时如何调用 Future 函数
- python - Scipy nquad 给出错误的输出
- object-detection - 使用 Yolo v4 检测安全帽和背心
- colors - QML Material Dark 不会更改为深色调色板
- r - Alteryx RTool 不提供输出
- javascript - 使用选择选项值 JS 更改图像
- java - 是否可以将带有嵌套选择语句的查询映射到 DTO?
- visual-studio-code - 在 VS Code 中,即使在调整了更漂亮的配置设置后,Prettier 也不会以逗号结尾
- ansible - 如何使用 ansible 创建和编辑文件
- google-apps-script - 邮件未通过 Google 表格应用脚本发送