CodeMirror編輯器自動完成預定義單詞

Question

我有一個使用CodeMirror編輯器輸入數據的網站。 我想添加一個非常簡單的自動完成功能：我有一些以@符號開頭的單詞（@ 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();
});