我正在使用codemirror来允许用户键入任何代码,如css / html / js。
如果用户输入类似于css模式的内容,我需要启用
div {
padding-
}
它应该提示用户从列表中选择可用选项,如
div {
padding-top
padding-left
padding-right
padding-bottom
}
使用codemirror的sublime编辑器。请参阅附图,了解sublime自动提示的演示
这是我的代码:
<script src="codemirror-5.4/mode/javascript/javascript.js"></script>
<script src="codemirror-5.4/mode/css/css.js"></script>
<script src="codemirror-5.4/mode/htmlmixed/htmlmixed.js"></script>
<script src="codemirror-5.4/addon/display/fullscreen.js"></script>
<script src="codemirror-5.4/keymap/sublime.js"></script>
<script src="codemirror-5.4/addon/hint/show-hint.js"></script>
<script src="codemirror-5.4/addon/hint/css-hint.js"></script>
<script src="codemirror-5.4/addon/hint/javascript.js"></script>
<h3>Editor</h3>
<div class="control-group">
<label class="control-label" for="textarea2">HTML</label>
<div class="controls">
<textarea class="code" name="code" id="codert" cols="40" rows="5" placeholder="Enter code here ..." style="width: 810px; height: 200px">
</textarea>
</div>
</div>
<div class="control-group">
<label class="control-label" for="textarea3">CSS</label>
<div class="controls">
<textarea id="code" class="code" name="codeCSS" cols="40" rows="5" placeholder="Enter code here ..." style="width: 810px; height: 200px">
</textarea>
</div>
</div>
<div class="control-group">
<label class="control-label" for="textarea3">javascript</label>
<div class="controls">
<textarea id="codeJS" class="code" name="codeJS" cols="40" rows="5" placeholder="Enter code here ..." style="width: 0px; height: 0px">
</textarea>
</div>
</div>
codemirror的JavaScript代码
<script>
function loadCSS() {
var $head = $("#preview").contents().find("head");
$head.html("<style>" + editor.getValue() + "</style>");
};
function loadJS() {
var scriptTag = "<script>"+editorJS.getValue()+"<";
scriptTag += "/script>";
var previewFrame2 = document.getElementById('preview');
var preview2 = previewFrame2.contentDocument || previewFrame2.contentWindow.document;
preview2.open();
preview2.write(editor2.getValue()+scriptTag);
preview2.close();
loadCSS();
};
var delay;
// Initialize CodeMirror editor with a nice html5 canvas demo.
// css editor
var editor = CodeMirror.fromTextArea(document.getElementById('code'), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode: "text/x-scss",
keyMap: "sublime",
theme: 'monokai',
autoCloseTags: true,
lineWrapping: true,
extraKeys: {"Ctrl-Space": "autocomplete"}
});
editor.on("change", function() {
clearTimeout(delay);
delay = setTimeout(updatePreview, 0);
});
function updatePreview() {
loadCSS();
}
setTimeout(updatePreview, 0);
var delay2;
// Initialize CodeMirror editor with a nice html5 canvas demo.
var editor2 = CodeMirror.fromTextArea(document.getElementById('codert'), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode: "text/html",
keyMap: "sublime",
theme: 'monokai',
autoCloseTags: true,
lineWrapping: true,
extraKeys: {"Ctrl-Space": "autocomplete"}
});
editor2.on("change", function() {
clearTimeout(delay2);
delay2 = setTimeout(updatePreview2, 0);
});
function updatePreview2() {
var scriptTag = "<script>"+editorJS.getValue()+"<";
scriptTag += "/script>";
var previewFrame2 = document.getElementById('preview');
var preview2 = previewFrame2.contentDocument || previewFrame2.contentWindow.document;
preview2.open();
preview2.write(editor2.getValue()+scriptTag);
preview2.close();
loadCSS();
}
setTimeout(updatePreview2, 0);
var delayJS;
// Initialize CodeMirror editor with a nice html5 canvas demo.
var editorJS = CodeMirror.fromTextArea(document.getElementById('codeJS'), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode: 'javascript',
keyMap: "sublime",
theme: 'monokai',
autoCloseTags: true,
lineWrapping: true,
extraKeys: {"Ctrl-Space": "autocomplete"}
});
editorJS.on("change", function() {
clearTimeout(delayJS);
delayJS = setTimeout(updatePreviewJS, 0);
});
function updatePreviewJS() {
loadJS();
}
setTimeout(updatePreviewJS, 0);
</script>
答案 0 :(得分:3)
function getCompletions(token, context) {
var found = [], start = token.string;
function maybeAdd(str) {
if (str.indexOf(start) == 0) 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) {
// 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.className == "js-variable")
base = window[obj.string];
else if (obj.className == "js-string")
base = "";
else if (obj.className == "js-atom")
base = 1;
while (base != null && context.length)
base = base[context.pop().string];
if (base != null) gatherCompletions(base);
}
else {
// If not, just look in the window object and any local scope
// (reading into JS mode internals to get at the local variables)
for (var v = token.state.localVars; v; v = v.next) maybeAdd(v.name);
gatherCompletions(window);
forEach(keywords, maybeAdd);
}
return found;
}
按ctrl + space启用代码提示。
答案 1 :(得分:2)
您没有发布所有代码,所以我可能错了,但请确保将show-hint.css
样式表添加到页眉。
<link rel="stylesheet" href="../addon/hint/show-hint.css">
否则,提示只是没有出现,而且我认为自动完成功能不起作用。
答案 2 :(得分:1)
编织:http://kodeweave.sourceforge.net/editor/#bc08cb08dee7609bbe7df11e8a55f27a
有许多不同的方法可以实现代码提示/自动完成。
var arrows = [37, 38, 39, 40]
editor.on("keyup", function(cm, e) {
if (arrows.indexOf(e.keyCode) < 0) {
editor.execCommand("autocomplete")
}
})
当然Codemirror有official documentation代码提示/自动完成
XML completion
HTML completion
JavaScript completion
您可以{j}示例view the source了解如何制作自己的提示。
答案 3 :(得分:0)
这就是我使用 CodeMirror 5 在我的应用程序 UI 中启用自定义代码提示的方式
(它基本上是由我在网上和https://codemirror.net/demo/complete.html 处的源代码中找到的几种解决方案组成的大杂烩)
首先我添加了 CodeMirror 和代码提示插件
<script src="libs/codemirror-5/codemirror.min.js"></script>
<script src="libs/codemirror-5/plugins/show-hint.js"></script>
我重载(这是正确的术语吗?)showHint
命令,将它放在一个函数中(注意,因为 CM 调用这个函数,它会将实例上下文作为可用参数注入)。
function getSnippets(codemirror) {
let snippets = [
{text: 'SELECT', displayName: 'select'},
{text: 'UPDATE', displayName: 'update'},
{text: 'CREATE', displayName: 'create'},
// other snippets for hinting
]
CodeMirror.showHint(codemirror, function () {
let cursor = codemirror.getCursor();
let line = codemirror.getLine(cursor.line);
let start = cursor.ch, end = cursor.ch;
// corrects ignoring trailing whitespaces removal
while (start && /\w/.test(line.charAt(start - 1)))
--start;
while (end < line.length && /\w/.test(line.charAt(end)))
++end;
const token = codemirror.getTokenAt(cursor);
const currentWord = token.string;
// reduce hint options if user has already entered something
const list = snippets.filter(function (item) {
return item.displayText.indexOf(currentWord) >= 0;
});
return {
list: list.length ? list : snippets,
from: CodeMirror.Pos(cursor.line, start),
to: CodeMirror.Pos(cursor.line, end)
};
}, {completeSingle: true});
}
然后,在 codemirror 实例选项中,我通过按 Ctrl+Space 定义了提示调用,这将调用我之前定义的 getSnippets
函数
let codemirrorOptions = {
mode: 'sql',
extraKeys: {
"Ctrl-Space": getSnippets
},
lineNumbers: false,
lineWrapping: true
};