You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
223 lines
9.0 KiB
223 lines
9.0 KiB
6 years ago
|
<%= javascript_include_tag "/codemirror/lib/codemirror", "/codemirror/mode/javascript/javascript", "/codemirror/addon/hint/show-hint", "/codemirror/addon/hint/anyword-hint", "/codemirror/addon/edit/matchbrackets", "/codemirror/addon/hint/javascript-hint" %>
|
||
|
|
<%= stylesheet_link_tag "/codemirror/lib/codemirror", "/codemirror/addon/hint/show-hint", "/codemirror/doc/docs", "/codemirror/addon/lint/lint" %>
|
||
|
|
<style type="text/css">
|
||
|
|
.breakpoints {width: .8em;}
|
||
|
|
.breakpoint { color: #822; }
|
||
|
|
.CodeMirror {border: 1px solid #aaa;}
|
||
|
|
.CodeMirror-activeline-gutter{ color: #822; }
|
||
|
|
</style>
|
||
|
|
<div id=nav>
|
||
|
|
<a href="http://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
|
||
|
|
|
||
|
|
<ul>
|
||
|
|
<li><a href="../index.html">Home</a>
|
||
|
|
<li><a href="../doc/manual.html">Manual</a>
|
||
|
|
<li><a href="https://github.com/codemirror/codemirror">Code</a>
|
||
|
|
</ul>
|
||
|
|
<ul>
|
||
|
|
<li><a class=active href="#">Any Word Completion</a>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<article>
|
||
|
|
<h2>Any Word Completion Demo</h2>
|
||
|
|
<form><textarea id="code" name="code">
|
||
|
|
(function() {
|
||
|
|
"use strict";
|
||
|
|
|
||
|
|
var WORD = /[\w$]+/g, RANGE = 500;
|
||
|
|
|
||
|
|
CodeMirror.registerHelper("hint", "anyword", function(editor, options) {
|
||
|
|
var word = options && options.word || WORD;
|
||
|
|
var range = options && options.range || RANGE;
|
||
|
|
var cur = editor.getCursor(), curLine = editor.getLine(cur.line);
|
||
|
|
var start = cur.ch, end = start;
|
||
|
|
while (end < curLine.length && word.test(curLine.charAt(end))) ++end;
|
||
|
|
while (start && word.test(curLine.charAt(start - 1))) --start;
|
||
|
|
var curWord = start != end && curLine.slice(start, end);
|
||
|
|
|
||
|
|
var list = [], seen = {};
|
||
|
|
function scan(dir) {
|
||
|
|
var line = cur.line, end = Math.min(Math.max(line + dir * range, editor.firstLine()), editor.lastLine()) + dir;
|
||
|
|
for (; line != end; line += dir) {
|
||
|
|
var text = editor.getLine(line), m;
|
||
|
|
word.lastIndex = 0;
|
||
|
|
while (m = word.exec(text)) {
|
||
|
|
if ((!curWord || m[0].indexOf(curWord) == 0) && !seen.hasOwnProperty(m[0])) {
|
||
|
|
seen[m[0]] = true;
|
||
|
|
list.push(m[0]);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
scan(-1);
|
||
|
|
scan(1);
|
||
|
|
return {list: list, from: CodeMirror.Pos(cur.line, start), to: CodeMirror.Pos(cur.line, end)};
|
||
|
|
});
|
||
|
|
})();
|
||
|
|
</textarea></form>
|
||
|
|
|
||
|
|
<p>Press <strong>ctrl-space</strong> to activate autocompletion. The
|
||
|
|
completion uses
|
||
|
|
the <a href="../doc/manual.html#addon_anyword-hint">anyword-hint.js</a>
|
||
|
|
module, which simply looks at nearby words in the buffer and completes
|
||
|
|
to those.</p>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
var nonEmpty = false;
|
||
|
|
CodeMirror.commands.autocomplete = function(cm) {
|
||
|
|
cm.showHint({hint: CodeMirror.hint.anyword});
|
||
|
|
};
|
||
|
|
|
||
|
|
var shixuns_editor = CodeMirror.fromTextArea(document.getElementById("code"), {
|
||
|
|
lineNumbers: true,
|
||
|
|
autofocus: true,
|
||
|
|
styleActiveLine: true,
|
||
|
|
lineWrapping: true,
|
||
|
|
matchBrackets: true,
|
||
|
|
lint: true,
|
||
|
|
gutters: ["CodeMirror-linenumbers", "breakpoints"],
|
||
|
|
extraKeys: {"Ctrl-Q": "autocomplete"}
|
||
|
|
});
|
||
|
|
|
||
|
|
/* shixuns_editor.setCursor(12, 0);
|
||
|
|
var info = shixuns_editor.lineInfo(12);
|
||
|
|
shixuns_editor.setGutterMarker(12, "breakpoints", info.gutterMarkers ? null : makeMarker());*/
|
||
|
|
// $(".CodeMirror-code").children('div').eq(11).find(".CodeMirror-linenumbers").append("<div class='CodeMirror-gutter-elt' style='left: 29px; width: 11px;'><div style='color: rgb(136, 34, 34);'><i class='fa fa-arrow-right' aria-hidden='true'></i></div></div>");
|
||
|
|
//$(".CodeMirror-code").children('div').eq(11).find(".CodeMirror-gutter-wrapper").append("<div style='left: -40.9943px; width: 41px;'><i class='fa fa-arrow-right' aria-hidden='true'></i></div>");
|
||
|
|
//console.log(shixuns_editor.getLineHandle(22));
|
||
|
|
//console.log(shixuns_editor.getLineHandle(22).wrapClass);
|
||
|
|
console.log($(".CodeMirror-code").children('div').eq(21).find(".CodeMirror-gutter-wrapper").append("<div class='CodeMirror-gutter-background CodeMirror-activeline-gutter' style='left: -40.9943px; width: 41px;'>11111</div>"));
|
||
|
|
|
||
|
|
/* shixuns_editor.on("gutterClick", function(cm, n) {
|
||
|
|
var info = cm.lineInfo(n);
|
||
|
|
cm.setGutterMarker(n, "breakpoints", info.gutterMarkers ? null : makeMarker());
|
||
|
|
});*/
|
||
|
|
console.log("##############################");
|
||
|
|
console.log(shixuns_editor.getTokenAt(shixuns_editor.getCursor()));
|
||
|
|
|
||
|
|
function makeMarker() {
|
||
|
|
var marker = document.createElement("div");
|
||
|
|
marker.style.color = "#822";
|
||
|
|
marker.innerHTML = "<i class='fa fa-arrow-right' aria-hidden='true'></i>";
|
||
|
|
return marker;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* shixuns_editor.on('change', function() {
|
||
|
|
shixuns_editor.showHint(); //满足自动触发自动联想功能
|
||
|
|
});*/
|
||
|
|
|
||
|
|
var ExcludedIntelliSenseTriggerKeys =
|
||
|
|
{
|
||
|
|
"8": "backspace",
|
||
|
|
"9": "tab",
|
||
|
|
"13": "enter",
|
||
|
|
"16": "shift",
|
||
|
|
"17": "ctrl",
|
||
|
|
"18": "alt",
|
||
|
|
"19": "pause",
|
||
|
|
"20": "capslock",
|
||
|
|
"27": "escape",
|
||
|
|
"32": "space",
|
||
|
|
"33": "pageup",
|
||
|
|
"34": "pagedown",
|
||
|
|
"35": "end",
|
||
|
|
"36": "home",
|
||
|
|
"37": "left",
|
||
|
|
"38": "up",
|
||
|
|
"39": "right",
|
||
|
|
"40": "down",
|
||
|
|
"45": "insert",
|
||
|
|
"46": "delete",
|
||
|
|
"91": "left window key",
|
||
|
|
"92": "right window key",
|
||
|
|
"93": "select",
|
||
|
|
"107": "add",
|
||
|
|
"109": "subtract",
|
||
|
|
"110": "decimal point",
|
||
|
|
"111": "divide",
|
||
|
|
"112": "f1",
|
||
|
|
"113": "f2",
|
||
|
|
"114": "f3",
|
||
|
|
"115": "f4",
|
||
|
|
"116": "f5",
|
||
|
|
"117": "f6",
|
||
|
|
"118": "f7",
|
||
|
|
"119": "f8",
|
||
|
|
"120": "f9",
|
||
|
|
"121": "f10",
|
||
|
|
"122": "f11",
|
||
|
|
"123": "f12",
|
||
|
|
"144": "numlock",
|
||
|
|
"145": "scrolllock",
|
||
|
|
"186": "semicolon",
|
||
|
|
"187": "equalsign",
|
||
|
|
"188": "comma",
|
||
|
|
"189": "dash",
|
||
|
|
"190": "period",
|
||
|
|
"191": "slash",
|
||
|
|
"192": "graveaccent",
|
||
|
|
"220": "backslash",
|
||
|
|
"222": "quote"
|
||
|
|
};
|
||
|
|
|
||
|
|
/* shixuns_editor.on("cursorActivity", function(editor, event){
|
||
|
|
var __Cursor = editor.getDoc().getCursor();
|
||
|
|
console.log(__Cursor.line);
|
||
|
|
console.log($(".CodeMirror-code").children('div').find(".fa-arrow-right")[0]);
|
||
|
|
console.log($(".CodeMirror-code").children('div').eq(12).find(".CodeMirror-gutter-wrapper"));
|
||
|
|
if((undefined === $(".CodeMirror-code").children('div').find(".fa-arrow-right")[0])) {
|
||
|
|
$(".CodeMirror-code").children('div').eq(12).find(".CodeMirror-gutter-wrapper").append("<div style='left: -40.9943px; width: 41px;'><i class='fa fa-arrow-right' aria-hidden='true'></i></div>");
|
||
|
|
}
|
||
|
|
});*/
|
||
|
|
/*$(".CodeMirror-code").click(function(){
|
||
|
|
if((undefined === $(".CodeMirror-code").children('div').find(".fa-arrow-right")[0])) {
|
||
|
|
$(".CodeMirror-code").children('div').eq(12).find(".CodeMirror-gutter-wrapper").append("<div style='left: -40.9943px; width: 41px;'><i class='fa fa-arrow-right' aria-hidden='true'></i></div>");
|
||
|
|
}
|
||
|
|
});*/
|
||
|
|
/*
|
||
|
|
|
||
|
|
shixuns_editor.on("keyup", function(editor, event)
|
||
|
|
{
|
||
|
|
if(event.shiftKey){
|
||
|
|
console.log("#############");
|
||
|
|
console.log(event.keyCode);
|
||
|
|
console.log("#############")
|
||
|
|
}
|
||
|
|
var __Cursor = editor.getDoc().getCursor();
|
||
|
|
var __Token = editor.getTokenAt(__Cursor);
|
||
|
|
console.log(!ExcludedIntelliSenseTriggerKeys[(event.keyCode || event.which).toString()]);
|
||
|
|
*/
|
||
|
|
/* if(event.keyCode == 38 || event.keyCode == 40){
|
||
|
|
console.log((undefined === $(".CodeMirror-code").children('div').find(".fa-arrow-right")[0]));
|
||
|
|
if((undefined === $(".CodeMirror-code").children('div').find(".fa-arrow-right")[0])) {
|
||
|
|
$(".CodeMirror-code").children('div').eq(12).find(".CodeMirror-gutter-wrapper").append("<div style='left: -40.9943px; width: 41px;'><i class='fa fa-arrow-right' aria-hidden='true'></i></div>");
|
||
|
|
}
|
||
|
|
}*//*
|
||
|
|
|
||
|
|
|
||
|
|
if (!editor.state.completionActive &&
|
||
|
|
!ExcludedIntelliSenseTriggerKeys[(event.keyCode || event.which).toString()])
|
||
|
|
{
|
||
|
|
// 中文编码的（ 与 { 对于键盘事件是相同的，所以需要再判断
|
||
|
|
*/
|
||
|
|
/* if(event.shiftKey && event.keyCode == 57){
|
||
|
|
if(__Token.string == '('){
|
||
|
|
editor.replaceSelection(")"); // 自动添加}
|
||
|
|
editor.setCursor(__Cursor.line, __Cursor.ch); // 设置光标位置在输入(之后
|
||
|
|
}
|
||
|
|
}else if(event.shiftKey && event.keyCode == 219){
|
||
|
|
if(__Token.string == '{'){
|
||
|
|
editor.replaceSelection("}"); // 自动添加}
|
||
|
|
editor.setCursor(__Cursor.line, __Cursor.ch);// 设置光标位置在输入{之后
|
||
|
|
}
|
||
|
|
}*//*
|
||
|
|
|
||
|
|
CodeMirror.commands.autocomplete(editor, null, { completeSingle: false });
|
||
|
|
}
|
||
|
|
});
|
||
|
|
*/
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</article>
|