CodeMirror编辑器自动完成预定义的单词

Question

我有网站,我用userMirror编辑器输入数据.我想添加一个非常简单的自动完成功能:我有一些用@符号(@ cat,@ dog,@ bird等)开头的单词,我希望编辑器在用户输入@或@c时用这些单词显示下拉列表 - 我该怎么办？这个？我看到自动完成插件,但他们需要按ctrl + space并使用模式......所以,任何帮助都会很棒!

谢谢!

Answer 1

这是如何(假设您已加载CodeMirror和show-hint插件):

// Dummy mode that puts words into their own token
// (You probably have a mode already)
CodeMirror.defineMode("mylanguage", function() {
  return {token: function(stream, state) {
    if (stream.match(/[@\w+]/)) return "variable";
    stream.next();
    return null;
  }};
});
// Register an array of completion words for this mode
CodeMirror.registerHelper("hintWords", "mylanguage",
                          ["@cat", "@dog", "@bird"]);

// Create an editor
var editor = CodeMirror(document.body, {mode: "mylanguage"});
// When an @ is typed, activate completion
editor.on("inputRead", function(editor, change) {
  if (change.text[0] == "@")
    editor.showHint();
});