在线js编辑器来喽！CodeMirror页面代码编辑器

背景介绍：在公司的开发平台使用时需要用到js代码编写输入框，大家都是在vscode之类的编辑器写好后粘贴，在用重构项目的时候想到了这里的弊端，想在页面上也可以有js 的结构可编写代码，就清晰方便很多。前面会介绍安装配置等 如需快速实现 滑到最底端ctrl c + v

来了来了它来了 大声喊出它的名字：CodeMirror

这个是我做调研的时候发现的一款代码编辑器！！
最终 找到了他有基于react开发的组件啊啊啊啊 “vue也有vue可用的（小声bb)”
话不多说 上官网：https://www.npmjs.com/package/react-codemirror2
(这个是CodeMirror2的官网)

好的 我们把它和 React 联系起来 喊出它的名字：react-codemirror2
codemirror：不使用任何第三方前端框架时使用
react-codemirror2：二次封装，集成为react中的一个插件，专用于在react中使用。

1. 如何安装：（基于React ！用 Vue的姐妹可以出门）

　npm install react-codemirror2 codemirror --save

2. 代码介绍：（先别着急ctrl+c 先看看脸了解一下）

在components也就是组件目录下新建 CodeMirror/index.js

import React from 'react'
// 先从react-codemirror2中引入CodeMirror组件
import {UnControlled as CodeMirror} from 'react-codemirror2'
// 引入javascript依赖（因为我是javascript语言 大家可以自行引入java c++等 参考官网）
import 'codemirror/mode/javascript/javascript'
// 引入codemirror核心css,js文件（必须）
import 'codemirror/lib/codemirror.css'
import 'codemirror/lib/codemirror.js'
// 引入solarized.css主题和clike代码模式的文件（可选择引入喜欢的主题和模式）
import 'codemirror/theme/monokai.css'
import 'codemirror/mode/clike/clike'
 
class CodeComponent extends React.Component{
    render() {
        const code = 'var a = 0;';
        return (
            <div>
                <CodeMirror
                    value={code}
                    options={{
                        mode: { name: "text/javascript" },
                        // 给编辑器绑定与前面keyMap配置不同的快捷键
                        extraKeys: { "Ctrl": "autocomplete" }, 
                        // 是否在初始化时自动获取焦点。默认情况是关闭的。但是，在使用textarea并且没有明确指定值的时候会被自动设置为true。
                        autofocus: true,
                        // 在长行时文字是换行(wrap)还是滚动(scroll)，默认为滚动(scroll)
                        lineWrapping: true,
                        // 主题
                        theme: 'monokai',
                        // 是否在编辑器左侧显示行号
                        lineNumbers: true
                    }}
                    onChange={(editor, data, value) => {
                    }}
                />
            </div>
        );
    }
}

export default CodeComponent

以及：编辑器还有这些options配置 大家可以参考：

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)替换的特殊字符的正则表达式。最常用的是非打印字符。默认为：/[\u0000-\u0019\u00ad\u200b-\u200f\u2028\u2029\ufeff]/。

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。

lineWiseCopyCut: boolean
启用时，如果在复制或剪切时没有选择文本，那么就会自动操作光标所在的整行。

undoDepth: integer
最大撤消次数，默认为200（包括选中内容改变事件） 。

historyEventDelay: integer
在输入或删除时引发历史事件前的毫秒数。

tabindex: integer
编辑器的tabindex。

autofocus: boolean
是否在初始化时自动获取焦点。默认情况是关闭的。但是，在使用textarea并且没有明确指定值的时候会被自动设置为true。

ctrl+c 1秒实现在线js代码编辑器

import React from 'react'
import {UnControlled as CodeMirror} from 'react-codemirror2'
import 'codemirror/mode/javascript/javascript'
import 'codemirror/lib/codemirror.css'
import 'codemirror/lib/codemirror.js'
import 'codemirror/theme/monokai.css'
import 'codemirror/mode/clike/clike'
 
class CodeComponent extends React.Component{
    render() {
        const code = 'var a = 0;';
        return (
            <div>
                <CodeMirror
                    value={code}
                    options={{
                        mode: { name: "text/javascript" },
                        extraKeys: { "Ctrl": "autocomplete" },
                        autofocus: true,
                        lineWrapping: false,
                        theme: 'monokai',
                        lineNumbers: true
                    }}
                    onChange={(editor, data, value) => {
                    }}
                />
            </div>
        );
    }
}

export default CodeComponent

启动项目 如图展示编辑器