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

Question

I am using CodeMirror as editor with show-hint.js and anyword-hint.js as example.我使用CodeMirror作为编辑器，以show-hint.js和anyword-hint.js为例。 By default, hints appear after pressing Ctrl-Space .默认情况下，按Ctrl-Space后会出现提示。

Problem:问题：

I want CodeMirror to show hints after I type @@ along with Ctrl-Space .我希望 CodeMirror 在我输入@@和Ctrl-Space后显示提示。

What I have tried already:我已经尝试过的：

I tried adding extraKeys like "'@'": "autocomplete" and "'@'-'@'": "autocomplete" , but it does not work.我尝试添加像"'@'": "autocomplete"和"'@'-'@'": "autocomplete"这样的extraKeys ，但它不起作用。 It works with a single @ , but not with @@ .它适用于单个@ ，但不适用于@@ 。

HTML: (save as .html) 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>

Answer 1

I solved it like this.If there is a better suggestion , please post.我是这样解决的。如果有更好的建议，请发表。

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);
      }
    }
  }
});

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2017-02-01 04:59:09

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2017-02-01 04:59:09

解决方案1
1 已采纳 2017-02-01 04:59:09