本文教程操作环境:windows7系统、jquery3.2.1版本,DELL G3电脑。
在编程中,实现代码的在线功能是非常迫切的需求。在js中有这样一个编辑器,能够实现代码的在线高亮,很多人都忽略了它的存在。这个编辑器就是codemirror,如果使用过一些基础库的人,可能见过它的身影。下面我们就codemirror概念、用法,以及配置项的在线运行为大家展开讲解。
1.codemirror概念
codemirror 基于Javascript,短小精悍,实时在线代码高亮显示,它不是某个富文本编辑器的附属产品,它是许多大名鼎鼎的在线代码编辑器的基础库。
2.codemirror用法
var editor = CodeMirror.fromTextArea(document.getElementById("htmlEdit"), { lineNumbers: false, mode: "htmlmixed", indentUnit: 2, lineWrapping:true, styleActiveLine: true });
3.codemirror配置项
cmOptions: { // codemirror config flattenSpans: false, // 默认情况下,CodeMirror会将使用相同class的两个span合并成一个。通过设置此项为false禁用此功能 tabSize: 2, // tab缩进空格数 mode: '', // 模式 theme: 'monokai', // 主题 smartIndent: true, // 是否智能缩进 lineNumbers: true, // 显示行号 matchBrackets: true, // 匹配符号 lineWiseCopyCut: true, // 如果在复制或剪切时没有选择文本,那么就会自动操作光标所在的整行 indentWithTabs: true, // 在缩进时,是否需要把 n*tab宽度个空格替换成n个tab字符 electricChars: true, // 在输入可能改变当前的缩进时,是否重新缩进 indentUnit: 2, // 缩进单位,默认2 autoCloseTags: true, // 自动关闭标签 autoCloseBrackets: true, // 自动输入括弧 foldGutter: true, // 允许在行号位置折叠 cursorHeight: 1, // 光标高度 keyMap: 'sublime', // 快捷键集合 extraKeys: { 'Ctrl-Alt': 'autocomplete', 'Ctrl-Q': cm => { cm.foldCode(cm.getCursor()) } }, //智能提示 gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'], // 用来添加额外的gutter styleActiveLine: true // 激活当前行样式 },
如何从包含状态信息的 JSON 数据集中获取特定状态的集合?
如何使用自适应剪裁路径实现不同尺寸按钮的图形裁剪?
React useState钩子函数中,点击按钮多次后控制台输出为何不同?
如何使用原生 JavaScript 实现表格行列精确滑动?
React v 新功能为我最喜欢的口袋妖怪应用程序注入活力!
在Vue3中解决聊天记录编辑时id唯一但input同时展示的问题,可以考虑以下方案: 1. **使用v-if和v-else控制展示**: 你可以使用`v-if`和`v-else`来控制不同聊天记录的展示。当某个聊天记录被选中进行编辑时,使用`v-if`来展示编辑框,其他聊天记录则展示正常内容。 ```html {{ message.content }}