CodeMirror 编辑器：在 @@ 等特定键模式后显示提示答案

【问题标题】：CodeMirror editor: show hint after specific key pattern like @@CodeMirror 编辑器：在 @@ 等特定键模式后显示提示
【发布时间】：2017-01-31 08:42:34
【问题描述】：

我使用CodeMirror 作为编辑器，以show-hint.js 和anyword-hint.js 为例。默认情况下，按Ctrl-Space后会出现提示。

问题：

我希望 CodeMirror 在我输入 @@ 和 Ctrl-Space 后显示提示。

我已经尝试过的：

我尝试添加extraKeys 之类的"'@'": "autocomplete" 和"'@'-'@'": "autocomplete"，但它不起作用。它适用于单个 @，但不适用于 @@。

HTML：（另存为.html）

<!doctype html>
<title>CodeMirror: Any Word Completion Demo</title>
<meta charset="utf-8" />
<link rel=stylesheet href="https://codemirror.net/doc/docs.css">
<link rel="stylesheet" href="https://codemirror.net/lib/codemirror.css">
<link rel="stylesheet" href="https://codemirror.net/addon/hint/show-hint.css">
<script src="https://codemirror.net/lib/codemirror.js"></script>
<script src="https://codemirror.net/addon/hint/show-hint.js"></script>
<script src="https://codemirror.net/addon/hint/anyword-hint.js"></script>
<script src="https://codemirror.net/mode/javascript/javascript.js"></script>
<article>
  <h2>Any Word Completion Demo</h2>
  <form>
    <textarea id="code" name="code">
      function isInt(n) { return n % 1 === 0; }
    </textarea>
  </form>
  <script>
    CodeMirror.commands.autocomplete = function(cm) {
      cm.showHint({
        hint: CodeMirror.hint.anyword
      });
    };
    var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
      lineNumbers: true,
      extraKeys: {
        "Ctrl-Space": "autocomplete",
        "'@'": "autocomplete",
      }
    });
  </script>
</article>

【问题讨论】：

标签： javascript jquery codemirror

【解决方案1】：

我是这样解决的。如果有更好的建议，请发表。

var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
  lineNumbers: true,
  extraKeys: {
    "Ctrl-Space": "autocomplete",
    "'@'": function(cm) {
      var charTomatch = '@';
      var curretCursorPosition = cm.getCursor();
      var backwardCursorPosition = {
        line: curretCursorPosition.line,
        ch: curretCursorPosition.ch - 1
      };
      var forwardCursorPosition = {
        line: curretCursorPosition.line,
        ch: curretCursorPosition.ch + 1
      };
      var backwardCharacter = cm.getRange(backwardCursorPosition, curretCursorPosition);
      var forwardCharacter = cm.getRange(curretCursorPosition, forwardCursorPosition);
      //update text anyway
      cm.replaceRange(charTomatch, curretCursorPosition);
      //
      if (backwardCharacter === charTomatch || forwardCharacter === charTomatch) {
        CodeMirror.commands.autocomplete(cm);
      }
    }
  }
});

【讨论】：