react-codemirror2 代码编辑器

CodeMirror是一款在线的支持语法高亮的代码编辑器。官网： codemirror.net/ 安装：

npm install react-codemirror2 codemirror --save

参考原文链接 www.cnblogs.com/minjh/p/150…

 import { Controlled as CodeMirror } from 'react-codemirror2'
 import 'codemirror/lib/codemirror.js';
  import 'codemirror/lib/codemirror.css';
 // 主题风格
 import 'codemirror/theme/solarized.css';
 // 设置代码语言模式（比如JS，SQL，python，java等）
 import 'codemirror/mode/javascript/javascript';
 import 'codemirror/mode/sql/sql.js';
 import 'codemirror/mode/python/python.js';
 import 'codemirror/mode/shell/shell.js';
 import 'codemirror/mode/clike/clike.js';
 // 代码模式，clike是包含java,c++等模式的
 import 'codemirror/mode/clike/clike';
 import 'codemirror/mode/css/css';
 //ctrl+空格代码提示补全
 import 'codemirror/addon/hint/show-hint.css'; // start-ctrl+空格代码提示补全
 import 'codemirror/addon/hint/show-hint.js';
 import 'codemirror/addon/hint/anyword-hint.js'; // end
 //代码高亮
 import 'codemirror/addon/selection/active-line';
 //折叠代码
 import 'codemirror/addon/fold/foldgutter.css';
 import 'codemirror/addon/fold/foldcode.js';
 import 'codemirror/addon/fold/foldgutter.js';
 import 'codemirror/addon/fold/brace-fold.js';
 import 'codemirror/addon/fold/comment-fold.js';

 import 'codemirror/theme/eclipse.css';
 import 'codemirror/theme/mbo.css';
 import 'codemirror/addon/edit/matchbrackets';
 import 'codemirror/addon/comment/comment';
 import 'codemirror/addon/comment/continuecomment';
 
 interface Props {
   readOnly: boolean;
   value: string | undefined;
   options?: (mode: string; theme?: string);
   onChange?: (val: string) => void;
   width?: string;
   height?: string;
 }
 let instance: { setSize: (arg0: ant.arg1: any) => void } | null = null;
 
export default({readOnly,value, options,onChange = () => {},...restProps}: Props) => {
   const DEFAULT_OPTIONS = {
     mode: 'application/json', // json解析
     lineNumbers: true, // 显示行号
     lineWrapping: true,
     tabSize: 4,
     indentUnit: 4,
     matchBrackets: true,
     continuecomments: 'Enter',
     theme: 'solarized', //选中的theme 值也可以是'mbo'
     autofocus: true, //自动获取焦点
     styleActiveLine: true, //光标代码高亮
   }
   
   // CodeMirror 只读配置
   const READONLY_OPTIONS = {
     ...DEFAULT_OPTIONS,
     readOnly
   }
   
   const cmOptions = {...READONLY_OPTIONS,...options}
   
   useEffect(()=>{
    if(instance){
     instance.setSize(restProps.width,restProps.height)
    }
   },[restProps.width,restProps.height])
 
   return (
     <CodeMirror
     value={value || ''}
     onBeforeChange={(editor,data,val) => onChange(val)}
     editorDidMount={(editor) => (instance=editor)}
     options={cmOptions}
     className='common-code-mirror'
     {...restProps}
     />
   )
 }