代码编辑器CodeMirror使用总结-配置理解说明
本文的选项是根据官网的配置环境进行的理解,有些选项没有使用到和没有理解的就没做说明,有理解不对的欢迎指出来,对没有说明的也欢迎用过的友友给出自己的理解
常用选项配置
value
编辑器的初始值
- [string
| CodeMirror.Doc
]
// formTextArea 方法初始化编辑器时,value被textarea的值覆盖掉了
CodeMirror.fromTextArea(document.getElementById('textarea'), {value: 'function abc(){}',
})// CodeMirror.Doc(text: string, mode: Object, firstLineNumber: ?number, lineSeparator: ?string)
CodeMirror(document.getElementById('editor'), {value: CodeMirror.Doc('function test(){}')
})
mode
编辑器语言的模式
- [string
| object
]
CodeMirror(document.getElementById('editor'), {value: 'function test(){}',// 需要引入mode目录下的javascript模式文件;也可以是自定义的mode名称// {name: "javascript", json: true} CodeMirror.modes CodeMirror.mimeModesmode: 'javascript',
})
lineSeparator
换行分隔符
- [string
| null
]
CodeMirror(document.getElementById('editor'), {value: 'function test(){a}',mode: 'javascript',// 设置换行分隔符,null的时候为默认的 \nlineSeparator: 'a',
})
theme
编辑器主题
- [string
]
CodeMirror(document.getElementById('editor'), {value: 'function test(){\n}',mode: 'javascript',// 通过给编辑器容器添加约定的类名来达到设置主题的目的 cm-s-[theme],见下图// 需要引入theme目录下对应的css文件,否则主题无对应的样式文件// 也可以自定义主题样式文件// 可以设置多个主题,eg theme:'night foo', 对应赋予的类名为 cm-s-night cm-s-footheme: 'night',
})
indentUnit
编辑器中缩进的大小
- [integer
]
CodeMirror(document.getElementById('editor'), {value: 'function test(){\n}',mode: 'javascript',// 代码块中默认的缩进单位-几个空格,效果见下图indentUnit: 4,
})
smartIndent
是否使用mode提供的上下文的缩进
- [boolean
]
CodeMirror(document.getElementById('editor'), {value: 'function test(){function test(){\n}}',mode: 'javascript',// 默认为true,设置为false,换行的时候上下文的缩进没有,从该行的首位开始smartIndent: false,
})
smartIndent: false
smartIndent: true
tabSize
tab字符的大小
- [integer
]
CodeMirror(document.getElementById('editor'), {value: 'function test(){function test(){\n}}',mode: 'javascript',// 默认为4,相当于4个空格的宽度tabSize: 4,
})
indentWithTabs
缩进的时候,是否把前面的N*tab大小的空间转化为N个tab字符,默认为false
- [boolean
]
indentWithTabs: true
indentWithTabs: false
electricChars
语言模式提供缩进的前提下,当输入的会引起缩进变化的时候,是否重新调整当前行的缩进,默认为true
- [boolean
]
electricChars: true
electricChars: false
specialChars
specialCharPlaceholder
direction
rtlMoveVisually
keyMap
配置使用的键映射,默认为codemirror.js中定义的唯一的一个键映射-default
- [string
]
extraKeys
给编辑器绑定keyMap中定义的额外的键,为null或者有效的键值对{key: value}
- [object
]
configureMouse
允许您配置鼠标选择和拖动的行为
- [fn(cm: CodeMirror, repeat: "single" | "double" | "triple", event: Event) → Object
]
lineWrapping
是否自动换行
- [boolean
]
// false - 默认,不自动换行
// true - 自动换行
lineNumbers
编辑器左侧是否显示行号
- [boolean
]
// true - 默认,显示
// false - 不显示
firstLineNumber
首行行号的设定,默认为1
- [integer
]
// 如果设定为2,则左侧行号为2,3,4,5...
lineNumberFormatter
左侧行号格式化方法
- [function(line: integer) → string
]
CodeMirror(document.getElementById('editor'), {value: 'function test(){function test(){\n}}',// 左侧行号为2,4,6...lineNumberFormatter: (line) => line * 2,
})
gutters
fixedGutter
scrollbarStyle
滚动条样式
- [string
]
// 默认native,原生的滚动条样式
// null,不显示滚动条
// Addons 可以增加滚动条模型
coverGutterNextToScrollbar
inputStyle
处理输入和焦点的方式
- [string
]
// 输入模式有两种: textarea | contenteditable
// 移动浏览器默认为 contenteditable , 桌面浏览器默认为 textarea
readOnly
编辑器是否只读
- [boolean
| string
]
// false - 默认,可编辑
// true - 只读,但是可显示光标,可以获取焦点
// nocursor - 只读,不显示光标,不可获取焦点
screenReaderLabel
showCursorWhenSelecting
选择内容的时候是否显示光标
- [boolean
]
// false - 默认,不显示
// true - 显示光标
lineWiseCopyCut
当没有选择内容时,进行复制或剪切操作,是否复制或剪切当前光标所在的整行内容
- [boolean
]
// true - 默认,复制或剪切整行. 注意此时会带上换行符
// false - 不进行复制或剪切
pasteLinesPerSelection
selectionsMayTouch
undoDepth
编辑器存储的最大撤销级别数, 这包括选择更改事件。默认为200。
- [integer
]
// 输入、删除、选择更改操作多次之后,会把这些操作记录在history中,可以来进行撤销操
// 而存储的最大次数就是该选项来设定的
historyEventDelay
输入或删除的时候,停顿一定时间后,会被认定为下一次操作。默认1250
- [integer
]
// 如果输入间隔超过 historyEventDelay 后,则被认为是两次输入。单位毫秒
tabindex
要分配给编辑器的标签索引
- [integer
]
autofocus
初始化的时候是否自动获取焦点
- [boolean
]
// false - 默认, 不获取焦点
// true - 获取焦点
phrases
下面是一些特殊场景才会用到的选项配置
dragDrop
是否启动拖拽,默认启用true
- [boolean
]
dragDrop: true-默认
allowDropFileTypes
允许可以向编辑器拖入的文件MIME类型
- [array<string>
]
// allowDropFileTypes: ['text/html'], 可以向编辑器中拖入html文件
// 但是此时 dragDrop 不能为false,否则该项不起作用
cursorBlinkRate
光标闪烁的半周期时长-毫秒,默认为530ms
- [number
]
// > 0时,光标闪烁一周时间为该时间的两倍
// = 0时,光标停止闪烁
// < 0时,光标不显示
cursorScrollMargin
在可滚动的文档中,当接近可见视图的顶部或底部时,始终保持在光标上方和下方的额外空间大小。默认值为0。
- [number
]
cursorScrollMargin: 20
cursorHeight
光标的高度,默认为1-代码一行的高度
- [number
]
// 根据需要可调整,如果设置0.5,则高度为代码行高的0.5倍
// 光标默认显示从当前行顶部开始显示
singleCursorHeightPerLine
true-将保持整个行(或换行部分)的光标高度不变。false-游标的高度基于相邻引用字符的高度。
- [boolean
]
resetSelectionOnContextMenu
控制当在当前选择的外部单击打开上下文菜单时,是否将光标移动到单击的点。默认值为true。
- [boolean
]
workTime
高亮伪线程的工作时间,单位ms
- [number
]
workDelay
高亮伪线程的间歇时间,单位ms
- [number
]
pollInterval
指示CodeMirror应该以多快的速度轮询其输入文本区域的更改(当聚焦时)。大多数输入都是由事件捕获的,但是有些东西,比如某些浏览器上的IME输入,并没有生成允许codemmirror正确检测它的事件。因此,它来检测。默认值为100ms
- [number
]
flattenSpans
默认情况下,如果相邻的标记具有相同的类,CodeMirror将把它们组合成单个span。这将生成更简单的DOM树,从而性能更好。对于某些类型的样式(如圆角),这将改变文档的外观。您可以将此选项设置为false以禁用此行为。
- [boolean
]
addModeClass
当启用=true(默认关闭=false)时,一个额外的CSS类将被添加到每个令牌,表明产生它的(内部)模式,前缀为“cm-m-”。例如,来自XML模式的令牌将获得cm-m-xml类。
- [boolean
]
maxHighlightLength
单行高亮显示的内容长度,默认为10000
- [number
]
// 超过部分按照纯文本显示
// Infinity - 无限制,等于关闭了该设置
maxHighlightLength: 100
viewportMargin
指定当前滚动到视图中的文档部分的上方和下方呈现的行数。默认为10
- [integer
]
// 有点类似于虚拟滚动显示
// Infinity - 无限制,始终显示全部内容,但是数据量大的时候会造成页面卡顿
spellcheck
指定是否对输入启用拼写检查。
- [boolean
]
autocorrect
指定是否对输入启用自动更正。
- [boolean
]
autocapitalize
指定是否对输入启用自动大小写。
- [boolean
]
代码编辑器CodeMirror使用总结-配置理解说明相关推荐
- 在线代码编辑器 Codemirror 的轻量级 React 组件
代码编辑器 CodeMirror 的轻量级 React 组件 demo @uiw-react.github.io/react-codem- 特性: ? 自动根据 mode 配置加载 mode 文件. ...
- 在线代码编辑器 CodeMirror 配置说明 - javascript开发的代码语法高亮显示引擎
CodeMirror是一款在线的支持语法高亮的代码编辑器.官网: http://codemirror.net/ 下载后,解压开得到的文件夹中,lib下是放的是核心库和核心css,mode下放的是各种支 ...
- 在线代码编辑器 CodeMirror 使用简介
在线代码编辑器 CodeMirror 使用简介 CodeMirror是一款在线的支持语法高亮的代码编辑器 github源码 特点: 支持100多种语言 支持多语言混合 代码自动提示 代码折叠 键盘绑定 ...
- react html编辑器,在线代码编辑器 Codemirror 的轻量级 React 组件
代码编辑器 CodeMirror 的轻量级 React 组件 demo @uiw-react.github.io/react-codemirror/ 特征:
- codemirror 光标定位_在线代码编辑器 CODEMIRROR 配置说明
转自:http://www.hyjiacan.com/codemirror-config/ CodeMirror是一款在线的支持语法高亮的代码编辑器.官网: http://codemirror.net ...
- 优秀的代码编辑器-Sublime Text 3配置教程
代码编辑器或者文本编辑器,对于程序员来说,就像剑与战士一样,谁都想拥有一把可以随心驾驭且锋利无比的宝剑,而每一位程序员,同样会去追求最适合自己的强大.灵活的编辑器,相信你和我一样,都不会例外. 好吧, ...
- 在线代码编辑器---codemirror插件
1.管网地址: http://codemirror.net/ 2.插件调用方法: 3.常用事件 1.onChange(instance,changeObj):codeMirror文本被修改后触发. i ...
- Java零基础入门 : (2) 代码编辑器IDEA安装与配置
工欲善其事必先利其器,好的工具会让你开发体验.开发效率提升N倍!!! 一.IntelliJ IDEA的下载 (1)下载地址:http://www.jetbrains.com/进入官网 ,点击Down ...
- 通过vue-codemirror和CodeMirror将代码编辑器添加到web项目中
前言 最近项目中有一个需求是,需要添加一个代码编辑器到项目中.也不知道是谁设计的,将代码编辑器添加到项目中? 费了九牛二虎之力终于找到了 vue-codemirror 和 CodeMirror 感觉是 ...
最新文章
- NoSQL 数据库系统对比
- MYSQL之SQL语句练习及思路_1
- golang 中的sort 包
- [Swift]LeetCode835. 图像重叠 | Image Overlap
- 11月国内网站统计:淘宝得益于双11流量直逼腾讯
- pytorch:多项式回归
- Windows系统CUDA10.2+CUDNN安装教程
- JPA 2 | 动态查询与命名查询
- python类和oop基础知识
- 数据库的四大特性以及事务的隔离级别
- android fragment点击返回键实现内容切换?
- java day10【接口、多态】
- SQLServer To MySQL 解决方案
- android 瀑布流StaggeredGridLayoutManager重新排序后,顶部留白处理
- [Linux]如何读取Kernel cmdline
- fiddler运行原理_fiddler工作原理
- Ubuntu图形界面和终端界面切换快捷键
- 3dmax运动混合器的使用
- 01 电阻的简介及常见电路分析
- π型滤波器 计算_T型π型滤波器计算软件
热门文章
- JavaScript 面向对象完全掌握核心原理详解(1) 面向对象导论
- 跨国面板数据(1960-2020)一:农业(农机+耕地+产量+面积+生产指数)(stata版)
- python 实现tar文件压缩解压的实例详解
- Java项目:演唱会售票管理系统(java+SSM+JSP+JavaScript+jQuery+mysql)
- 如何提高社会化媒体营​销的效果
- 苹果春季发布会定档4月21日,AirTags 呼声最高
- 极域电子书包windows版本怎么安装
- 【蓝牙】如何新建一个BLE GATT SERVICE
- FTP协议及其安全问题
- JavaScript——冒泡排序