我正在尝试 Hook CodeMirror 并将我自己的单词列表插入到自动完成中。基于此链接 https://stackoverflow.com/a/19269913/2892746我试图实现以下内容。我创建了一个 JSBin with it
问题是虽然我的话确实出现在自动完成中,但它们没有被正确过滤。例如,我输入“f”,然后按 ctrl+space。但是我在弹出窗口中得到了所有 3 个单词,并选择了“mariano”。我希望只有“Florencia”可供选择。
知道我可能做错了什么吗?
ps: 是的,我很乐意不更改 anyword
提示并提供我自己的提示,只是匹配我自己的话,但我不知道该怎么做。
提前致谢!
最佳答案
我终于自己解决了这个问题。我不是 JS 专家,但我会分享我的解决方案以防它对其他人有用。
重要:我从 this project 得到了原始代码.该项目依赖于 Angular 和 Angular-codemirror。我没有在我的应用程序中的任何地方使用 Angular,所以我提取并调整它以在没有 Angular 的情况下使用它。
目标是能够定义将用于自动完成的单词字典/映射。解决方法很简单。在 myTextAreaId
元素的父元素中,您必须像这样创建一个 span/div:
<div class="codeMirrorDictionaryHintDiv" codemirror-dictionary-hint="[ 'Soccer', 'Cricket', 'Baseball', 'Kho Kho' ]"></div>
然后...代码,将查找具有 css 类 codeMirrorDictionaryHintDiv
的 closest
元素,将提取属性 codemirror-dictionary-hint
, 将对其进行评估以便从中获取 Javascript 数组,然后简单地将其设置为提示函数的输入字典。
代码是:
var dictionary = [];
try {
// JSON.parse fails loudly, requiring a try-catch to prevent error propagation
var dictionary = JSON.parse(
document.getElementById('myTextAreaId')
.closest('.codeMirrorDictionaryHintDiv')
.getAttribute('codemirror-dictionary-hint')
) || [];
} catch(e) {}
// Register our custom Codemirror hint plugin.
CodeMirror.registerHelper('hint', 'dictionaryHint', function(editor) {
var cur = editor.getCursor();
var curLine = editor.getLine(cur.line);
var start = cur.ch;
var end = start;
while (end < curLine.length && /[\w$]/.test(curLine.charAt(end))) ++end;
while (start && /[\w$]/.test(curLine.charAt(start - 1))) --start;
var curWord = start !== end && curLine.slice(start, end);
var regex = new RegExp('^' + curWord, 'i');
return {
list: (!curWord ? [] : dictionary.filter(function(item) {
return item.match(regex);
})).sort(),
from: CodeMirror.Pos(cur.line, start),
to: CodeMirror.Pos(cur.line, end)
}
});
CodeMirror.commands.autocomplete = function(cm) {
CodeMirror.showHint(cm, CodeMirror.hint.dictionaryHint);
};
关于javascript - CodeMirror 自定义提示列表无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36652847/