react在线浏览doc_CodeMirror代码编辑器（react篇）

最新推荐文章于 2024-09-26 08:38:16 发布

weixin_39983384

最新推荐文章于 2024-09-26 08:38:16 发布

阅读量703

点赞数

文章标签： react在线浏览doc

简介

CodeMirror 是一款在线的支持语法高亮的代码编辑器，官网地址：https://codemirror.net/

安装

npm install react-codemirror2 codemirror --save

使用

// 引入codemirror封装import {UnControlled as CodeMirror} from 'react-codemirror2'import 'codemirror/lib/codemirror.css';// 主题风格import 'codemirror/theme/solarized.css';// 代码模式，clike是包含java,c++等模式的import 'codemirror/mode/clike/clike'; {}} /* HERE: pick out only the value. and might as well get name. *//>

运行效果图

option可使用的配置：

value: string | CodeMirror.Doc

编辑器的初始值(文本)，可以是字符串或者CodeMirror文档对象(不同于HTML文档对象)。

mode: string | object

通用的或者在CodeMirror中使用的与mode相关联的mime，当不设置这个值的时候，会默认使用第一个载入的mode定义文件。一般地，会使用关联的mime类型来设置这个值；除此之外，也可以使用一个带有name属性的对象来作为值(如：{name: “javascript”, json: true})。可以通过访问CodeMirror.modes和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 lower 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。