0

我有一个想要实现 CodeMirror 的项目。基本上，其中一个要求是您可以键入 double %（例如：%% 关键字 %%）以显示列表（提示）。我已经看过带有Ctrl+的官方示例Space，但我想知道如何使键入开始双百分比的第二个百分比字符成为显示提示列表的触发器，以及如何在之后显示带有结尾双百分比的关键字从列表中选择一个选项。我需要帮助或任何演示或示例代码。

4

1 回答 1

0

我在使用 CodeMirror 时遇到了类似的问题，我将分享我所学到的。

键入 double %（例如：%% 关键字 %%）以显示列表（提示）。

为此，首先您需要处理'change'事件：

var cm = CodeMirror.fromTextArea(document.getElementById('textArea'),
{
  mode:        'your_custom_language',
  lineNumbers: true,
  extraKeys:   {'Ctrl-Space': 'autocomplete'}
});

var onChange = function(instance, object)
{
    // do stuff...
}

CodeMirror.on(cm, 'change', onChange);

然后，在onChange功能上，您必须执行以下操作：

  1. 检查最后插入的字符是否为%.
  2. 检查前一个字符是否为%.
  3. 召唤提示列表。

我是这样做的：

var onChange = function(instance, object)
{
    // Check if the last inserted character is `%`.
    if (object.text[0] === '%' &&
        // Check if the previous character is `%`.
        instance.getRange({ch: object.to.ch - 1, line: object.to.line}, object.to) === '%')
    {
        // Summon the hint list.
        CodeMirror.showHint(cm, CodeMirror.hint.your_custom_language);
    }
}

请注意，我使用cm之前声明的对象，您必须更改它以满足您的要求。而且，为您的关键字推断出的上下文与您的预期不符；为了解决这个问题，您需要修改自己的codemirror/addon/hint/your_custom_language-hint.js；在我的例子中，我将我的自定义语言基于 JavaScript（重构javascript-hint.js）修改从以下位置调用的函数maybeAdd：

function maybeAdd(str) {
  if (str.lastIndexOf(start, 0) == 0 && !arrayContains(found, str)) found.push(str);
}

到：

function maybeAdd(str)
{
  if (isValidHint(str))
  {
    found.push({text: '%%' + str + '%%', displayText: str});
  }
}

请注意，数组found不再getCompletions存储字符串，而是以这种格式存储对象：

{
    // this will be written when the hint is selected.
    "text": "%%text%%",
    // this will be shown on the hint list.
    "displayText": "text",
    // You can custom each hint match with a CSS class.
    "className": "CSSClass"
}

请注意，我上面写的所有内容都是对我的 CodeMirror 自定义语言的重构，它未经您自己的自定义语言测试，但我希望它有所帮助。

顺便提一句; 我认为 CodeMirror 文档看起来并不清晰，并且缺少许多所需功能的示例。

于 2014-06-11T08:20:10.903 回答