Codemirror自动完成-建议来源
Codemirror autocomplete - suggestions sources
我正在使用codemirror自动完成演示。它显示了一些javascript关键字,如应用程序缓存、defaultStatus和framenet,以及更多的建议。我希望它显示我的关键字作为建议。但是我找不到这些javascript关键字的来源。请帮我做这件事。。
Javascript模式很难理解。所以我采用了python模式,更改python-hint.js非常容易,我得到了我想要的输出。谢谢Eliran。。
查看javascript-hint.js
,它包含一些关键字,可以在源代码中看到。例如javascript关键字(第96行):
var javascriptKeywords =
("break case catch continue debugger default delete do else false finally for function " +
"if in instanceof new null return switch throw true try typeof var void while with")
.split(" ");
这应该会让您开始编写自己的*-hint.js
文件。
当我遇到这个问题时,在问自己的问题之前,我实际上是在浏览旧的CodeMirror自动完成问题。
Javascript完成来自多个源代码的组合,正如Eliran所指出的那样,您可以在源代码中看到这一点
这是此时的相关功能:
function getCompletions(token, context, keywords, options) {
var found = [], start = token.string, global = options && options.globalScope || window;
function maybeAdd(str) {
if (str.lastIndexOf(start, 0) == 0 && !arrayContains(found, str)) found.push(str);
}
function gatherCompletions(obj) {
if (typeof obj == "string") forEach(stringProps, maybeAdd);
else if (obj instanceof Array) forEach(arrayProps, maybeAdd);
else if (obj instanceof Function) forEach(funcProps, maybeAdd);
for (var name in obj) maybeAdd(name);
}
if (context && context.length) {
// If this is a property, see if it belongs to some object we can
// find in the current environment.
var obj = context.pop(), base;
if (obj.type && obj.type.indexOf("variable") === 0) {
if (options && options.additionalContext)
base = options.additionalContext[obj.string];
if (!options || options.useGlobalScope !== false)
base = base || global[obj.string];
} else if (obj.type == "string") {
base = "";
} else if (obj.type == "atom") {
base = 1;
} else if (obj.type == "function") {
if (global.jQuery != null && (obj.string == '$' || obj.string == 'jQuery') &&
(typeof global.jQuery == 'function'))
base = global.jQuery();
else if (global._ != null && (obj.string == '_') && (typeof global._ == 'function'))
base = global._();
}
while (base != null && context.length)
base = base[context.pop().string];
if (base != null) gatherCompletions(base);
} else {
// If not, just look in the global object and any local scope
// (reading into JS mode internals to get at the local and global variables)
for (var v = token.state.localVars; v; v = v.next) maybeAdd(v.name);
for (var v = token.state.globalVars; v; v = v.next) maybeAdd(v.name);
if (!options || options.useGlobalScope !== false)
gatherCompletions(global);
forEach(keywords, maybeAdd);
}
return found;
}
在这里你可以看到一些来源keywords是由调用函数(未显示)提供的参数,在本例中,它是Eliran提到的拆分字符串:
var javascriptKeywords = ("break case catch continue debugger default delete do else false finally for function " +
"if in instanceof new null return switch throw true try typeof var void while with").split(" ");
这里的逻辑中有一个分支:if (context && context.length) {
在真实情况下,它使用调用方传递的上下文对象(在本例中为属性链)。它可以使用可选的additionalContext对象,或者如果选项中没有明确禁用useGlobalScope,它可以使用全局作为开始查找的基础(字符串、原子和函数类型具有特殊的处理逻辑)。然后,它使用while循环来解析上下文链并调用gatherCompletions
。根据传递给gatherCompletions
的对象类型,它可以尝试添加拆分字符串提供的其他硬编码列表:
var stringProps = ("charAt charCodeAt indexOf lastIndexOf substring substr slice trim trimLeft trimRight " +
"toUpperCase toLowerCase split concat match replace search").split(" ");
var arrayProps = ("length concat join splice push pop shift unshift slice reverse sort indexOf " +
"lastIndexOf every some filter forEach map reduce reduceRight ").split(" ");
var funcProps = "prototype apply call bind".split(" ");
或者通过迭代javascript对象本身的属性。
最后,在其他情况下为token.state.localVars
、token.state.globalVars
,如果未明确禁用,则全局对象将用作gatherCompletions
函数的对象。在这里,您还将注意到上面提到的关键字。请注意,global要么在options.globalScope
中提供,要么采用window的值。
摘要
只是在这里快速显示所有来源:
- javascript关键字
- funcProps
- 阵列道具
- 字符串道具
- 全局对象
- options.additionalContext
- token.state.localVars
- token.state.globalVars
- 上下文属性链
这真的很管用:
<!doctype html>
<html>
<head>
<title>CodeMirror</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="UTF-8">
<link rel=stylesheet href="https://CodeMirror.net/doc/docs.css">
<script src="https://CodeMirror.net/addon/hint/anyword-hint.js" id="anyword"></script>
<link rel="stylesheet" href="https://CodeMirror.net/lib/codemirror.css">
<link rel="stylesheet" href="https://CodeMirror.net/addon/hint/show-hint.css">
<link rel="stylesheet" href="https://CodeMirror.net/addon/dialog/dialog.css">
<link rel="stylesheet" href="https://CodeMirror.net/addon/search/matchesonscrollbar.css">
<script src="https://CodeMirror.net/lib/codemirror.js"></script>
<script src="https://CodeMirror.net/addon/edit/closetag.js"></script>
<script src="https://CodeMirror.net/addon/hint/show-hint.js"></script>
<script src="https://CodeMirror.net/addon/hint/sql-hint.js"></script>
<script src="https://CodeMirror.net/addon/mode/loadmode.js"></script>
<script src="https://CodeMirror.net/mode/meta.js"></script>
<script src="https://CodeMirror.net/addon/hint/xml-hint.js"></script>
<script src="https://CodeMirror.net/addon/hint/html-hint.js"></script>
<script src="https://CodeMirror.net/addon/search/jump-to-line.js"></script>
<script src="https://CodeMirror.net/addon/hint/javascript-hint.js"></script>
<script src="https://CodeMirror.net/mode/xml/xml.js"></script>
<script src="https://CodeMirror.net/mode/javascript/javascript.js"></script>
<script src="https://CodeMirror.net/mode/css/css.js"></script>
<script src="https://CodeMirror.net/mode/htmlmixed/htmlmixed.js"></script>
<script src="https://CodeMirror.net/addon/dialog/dialog.js"></script>
<script src="https://CodeMirror.net/addon/search/searchcursor.js"></script>
<script src="https://CodeMirror.net/addon/search/jump-to-line.js"></script>
<script src="https://CodeMirror.net/addon/search/search.js"></script>
<script src="https://CodeMirror.net/addon/scroll/annotatescrollbar.js"></script>
<script src="https://CodeMirror.net/addon/search/matchesonscrollbar.js"></script>
</head>
<body>
<div id="editor" onclick="autocomplete()"></div>
<script>
function autocomplete() {
myCodeMirror.execCommand("autocomplete");
}
</script>
<script>
var myCodeMirror = CodeMirror(
document.getElementById('editor'), {
lineNumbers: true,
});
</script>
</body>
</html>
- CodeMirror.禁用垂直滚动条
- CodeMirror动态语法验证
- Codemirror:将特定的基于模式的文本隐藏到编辑器中
- codemirror onKeyEvent not firing
- 如何将 HTML 文档作为起始值传递给 CodeMirror
- Summernote 和 Codemirror 不起作用
- JQuery如何更改CodeMirror中文本区域的字符串值
- 当htmlMode为true时,Summernote html代码视图与codemirror无法正常工作
- CodeMirror自定义提示列表工作不正常
- Don'在IE中调用find next时,不要高亮显示Codemirror中的光标
- 是否可以在CodeMirror 2中包含多种模式
- CodeMirror自定义showHint()调用不会'不起作用
- 将oninput与CodeMirror一起使用
- 从 CDN 使用 RequireJS 加载 CodeMirror
- codemirror js-replaceSelection,只能在我键入字符后看到更改
- Codemirror-提示/使用分隔符自动完成
- CodeMirror在粘贴自定义css线条高度时呈现错误
- Codemirror函数和扩展脚本
- 获取 CodeMirror 实例
- 如何使用show hint插件在CodeMirror中订阅选择事件