代码编辑器插件 React-Codemirror2

1、安装依赖

npm install react-codemirror2 codemirror --save

2、使用教程

import React from 'react'; import { UnControlled as CodeMirror } from 'react-codemirror2'; require("codemirror/mode/xml/xml"); require("codemirror/mode/javascript/javascript"); import "codenirror/lib/codemirror.css"; const CodeMirrorPanel = (props) => { return ( <div style={{ boxShadow: "rgba(0,0,0,0.1) 0px 5px 10px" }} > <CodeMirror value={props.value} options={{ mode: "application/json", theme: "base16-light", tabSize: 2, smartIndent: true, // 是否智能缩进 lineNumbers: true, // 显示行号 lineWrapping: true, // 自动换行 readOnly: true, // 只读 }} editorDidMount={(editor) => { editor.setSize("auto", "auto"); }} onChange={(editor, data, value) => { console.log(editor, data, value) }} /> </div> ) }