[转] CodeMirror基本配置项

it2023-01-13  64

原文地址: https://blog.csdn.net/qq_35372389/article/details/106540469

 

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(); // 插件不显示文本内容,直到点击才出现

 

最新回复(0)