react在线浏览doc_CodeMirror代码编辑器（react篇）简介
安装
npm install react-codemirror2 codemirror --save
使⽤
// 引⼊codemirror封装import {UnControlled as CodeMirror} from 'react-codemirror2'import 'codemirror/lib/codemirror.css';// 主题风格import 'codemirror/theme/sola 运⾏效果图
option可使⽤的配置：
value: string | CodeMirror.Doc
编辑器的初始值(⽂本)，可以是字符串或者CodeMirror⽂档对象(不同于HTML⽂档对象)。
mode: string | object
通⽤的或者在CodeMirror中使⽤的与mode相关联的mime，当不设置这个值的时候，会默认使⽤第⼀个载⼊的mode定义⽂件。⼀般地，
会使⽤关联的mime类型来设置这个值；除此之外，也可以使⽤⼀个带有name属性的对象来作为值(如：{name: “javascript”, json:
true})。可以通过访问des和CodeMirror.mimeModes获取定义的mode和MIME。
lineSeparator: string|null
明确指定编辑器使⽤的⾏分割符(换⾏符)。默认(值为null)情况下，⽂档会被 CRLF(以及单独的CR, LF)分割，单独的LF会在所有的输出中
⽤作换⾏符(如：getValue)。当指定了换⾏字符串，⾏就只会被指定的串分割。
theme: string
配置编辑器的主题样式。要使⽤主题，必须保证名称为 .cm-s-[name] (name是设置的theme的值)的样式是加载上了的。当然，你也可以
⼀次加载多个主题样式，使⽤⽅法和html和使⽤类⼀样，如： theme: foo bar，那么此时需要cm-s-foo cm-s-bar这两个样式都已经被加
载上了。
indentUnit: integer
缩进单位，值为空格数，默认为2 。
smartIndent: boolean
⾃动缩进，设置是否根据上下⽂⾃动缩进(和上⼀⾏相同的缩进量)。默认为true。
tabSize: integer
tab字符的宽度，默认为4 。
indentWithTabs: boolean
在缩进时，是否需要把 n*tab宽度个空格替换成n个tab字符，默认为false 。
electricChars: boolean
在输⼊可能改变当前的缩进时，是否重新缩进，默认为true (仅在mode⽀持缩进时有效)。
specialChars: RegExp
需要被占位符(placeholder)替换的特殊字符的正则表达式。最常⽤的是⾮打印字符。默认为：/[ --  ]/。
specialCharPlaceholder: function(char) → Element
这是⼀个接收由specialChars选项指定的字符作为参数的函数，此函数会产⽣⼀个⽤来显⽰指定字符的DOM节点。默认情况下，显⽰⼀个红点(·)，这个红点有⼀个带有前⾯特殊字符编码的提⽰框。
rtlMoveVisually: boolean
Determines whether horizontal cursor movement through right-to-left (Arabic, Hebrew) text is visual (pressing the left arrow moves the cursor left) or logical (pressing the left arrow moves to the next lowe
r index in the string, which is visually right in right-to-left text). The default is false on Windows, and true on other platforms.(这段完全不晓得搞啥⼦⿁)
keyMap: string
配置快捷键。默认值为default，即 codemorrir.js 内部定义。其它在key map⽬录下。
extraKeys: object
给编辑器绑定与前⾯keyMap配置不同的快捷键。
lineWrapping: boolean
在长⾏时⽂字是换⾏(wrap)还是滚动(scroll)，默认为滚动(scroll)。
lineNumbers: boolean
是否在编辑器左侧显⽰⾏号。
firstLineNumber: integer
⾏号从哪个数开始计数，默认为1 。
lineNumberFormatter: function(line: integer) → string
使⽤⼀个函数设置⾏号。
gutters: array
⽤来添加额外的gutter(在⾏号gutter前或代替⾏号gutter)。值应该是CSS名称数组，每⼀项定义了⽤于绘制gutter背景的宽度(还有可选的背景)。为了能明确设置⾏号gutter的位置(默认在所有其它gutter的右边)，也可以包含CodeMirror-linenumbers类。类名是⽤于传给setGutterMarker的键名(keys)。
fixedGutter: boolean
设置gutter跟随编辑器内容⽔平滚动(false)还是固定在左侧(true或默认)。
scrollbarStyle: string
设置滚动条。默认为”native”，显⽰原⽣的滚动条。核⼼库还提供了”null”样式，此样式会完全隐藏滚动条。Addons可以设置更多的滚动条模式。
coverGutterNextToScrollbar: boolean
当fixedGutter启⽤，并且存在⽔平滚动条时，在滚动条最左侧默认会显⽰gutter，当此项设置为true时，gutter会被带有CodeMirror-gutter-filler类的元素遮挡。
inputStyle: string
选择CodeMirror处理输⼊和焦点的⽅式。核⼼库定义了textarea和contenteditable输⼊模式。在移动浏览器上，默认是contenteditable，在桌⾯浏览器上，默认是textarea。在contenteditable模式下对IME和屏幕阅读器⽀持更好。
readOnly: boolean|string
编辑器是否只读。如果设置为预设的值 “nocursor”，那么除了设置只读外，编辑区域还不能获得焦点。
showCursorWhenSelecting: boolean
在选择时是否显⽰光标，默认为false。
lineWiseCopyCut: boolean
启⽤时，如果在复制或剪切时没有选择⽂本，那么就会⾃动操作光标所在的整⾏。
undoDepth: integer
最⼤撤消次数，默认为200(包括选中内容改变事件) 。
historyEventDelay: integer
在输⼊或删除时引发历史事件前的毫秒数。
tabindex: integer
编辑器的tabindex。
autofocus: boolean
是否在初始化时⾃动获取焦点。默认情况是关闭的。但是，在使⽤textarea并且没有明确指定值的时候会被⾃动设置为true。
低级选项
下⾯的选项仅⽤于⼀些特殊情况。
dragDrop: boolean
是否允许拖放，默认为true。
allowDropFileTypes: array
编辑器在线使用默认为null。当设置此项时，只接收包含在此数组内的⽂件类型拖⼊编辑器。⽂件类型为MIME名称。
cursorBlinkRate: number
光标闪动的间隔，单位为毫秒。默认为530。当设置为0时，会禁⽤光标闪动。负数会隐藏光标。
cursorScrollMargin: number
当光标靠近可视区域边界时，光标距离上⽅和下⽅的距离。默认为0 。
cursorHeight: number
光标⾼度。默认为1，也就是撑满⾏⾼。对⼀些字体，设置0.85看起来会更好。
resetSelectionOnContextMenu: boolean
设置在选择⽂本外点击打开上下⽂菜单时，是否将光标移动到点击处。默认为true。
workTime, workDelay: number
通过⼀个假的后台线程⾼亮 workTime 时长，然后使⽤ timeout 休息 workDelay 时长。默认为200和300 。(完全不懂这个功能是在说啥)
pollInterval: number
指明CodeMirror向对应的textarea滚动(写数据)的速度(获得焦点时)。⼤多数的输⼊都是通过事件捕获，但是有的输⼊法(如IME)在某些浏览器上并不会⽣成事件，所以使⽤数据滚动。默认为100毫秒。
flattenSpans: boolean
默认情况下，CodeMirror会将使⽤相同class的两个span合并成⼀个。通过设置此项为false禁⽤此功能。
addModeClass: boolean
当启⽤时(默认禁⽤)，会给每个标记添加额外的表⽰⽣成标记的mode的以cm-m开头的CSS样式类。例如，XML mode产⽣的标记，会添加cm-m-xml类。
maxHighlightLength: number
当需要⾼亮很长的⾏时，为了保持响应性能，当到达某些位置时，编辑器会直接将其他⾏设置为纯⽂本(plain text)。默认为10000，可以设置为Infinity来关闭此功能。
viewportMargin: integer
指定当前滚动到视图中内容上⽅和下⽅要渲染的⾏数。这会影响到滚动时要更新的⾏数。通常情况下应该使⽤默认值10。可以设置值为Infinity始终渲染整个⽂档。注意：这样设置在处理⼤⽂档时会影响性能。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。