editor = CodeMirror.fromTextArea(document.getElementById("textarea"), {
extraKeys: { // 配置按键
"Ctrl": "autocomplete", // 需要下面的synonyms配置
},
lineNumbers: true, // 显示行号
lineWrapping: true, // 自动换行
styleActiveLine: true, // 选中行高亮
mode: "text/javascript",
theme: "idea", // 主题配置
matchBrackets: true, // 匹配括号
hintOptions: {hint: synonyms}, // 自动提示配置
gutters: ["CodeMirror-lint-markers"],
lint: true, // 代码出错提醒
indentUnit: 4, // 缩进配置(默认为2)
});
// 自动提示需要支持Pormise, 当当前数据的字符串满足comp中的某一个word时,会提示该word所在数组的词汇
if (typeof Promise !== "undefined") {
comp = [
["here", "hither"],
["asynchronous", "nonsynchronous"],
["completion", "achievement", "conclusion", "culmination", "expirations"],
["hinting", "advive", "broach", "imply"],
["function","action"],
["provide", "add", "bring", "give"],
["synonyms", "equivalents"],
["words", "token"],
["each", "every"],
];
}
// 提示功能的代码, 可以适当修改来满足自己的需求
function synonyms(cm, option) {
return new Promise(function(accept) {
setTimeout(function() {
var cursor = cm.getCursor(), line = cm.getLine(cursor.line)
var start = cursor.ch, end = cursor.ch
while (start && /\w/.test(line.charAt(start - 1))) --start
while (end < line.length && /\w/.test(line.charAt(end))) ++end
var word = line.slice(start, end)
for (var i = 0; i < comp.length; i++) if (comp[i].indexOf(word) != -1)
return accept({list: comp[i],
from: CodeMirror.Pos(cursor.line, start),
to: CodeMirror.Pos(cursor.line, end)})
return accept(null)
}, 10)
})
}
// 额外配置快捷键
editor.addKeyMap({
'Ctrl-S': function () {
saveFunction();
},
'Ctrl-s': function () {
saveFunction();
},
'Ctrl-f': autoFormatSelection,
});
// 自动格式化编辑器
function autoFormatSelection() {
CodeMirror.commands["selectAll"](editor);
var range = getSelectedRange();
editor.autoFormatRange(range.from, range.to);
editor.commentRange(false, range.from, range.to);
}
// 获取编辑器中选中范围的的行号
function getSelectedRange() {
return {
from: editor.getCursor(true),
to: editor.getCursor(false)
}
}
editor.replaceSelection("内容"); // 替换选中的字符串、在光标处插入字符
editor.setSize('100%', '100%'); //设置代码框的长宽
CodeMirror.commands["selectAll"](editor); // 执行内置的命令
CodeMirror.commands["goDocEnd"](editor) //移动到文件尾部
editor.refresh(); // 插件不显示文本内容,直到点击才出现