codemirror antdesign结合

一、背景

在后端管理界面中，有时候我们需要能够将一些配置代码能够在代码中进行配置，如果用普通的TextArea可视化不是很好，codemirror算是业界在Js里面做的很不错的一个代码编辑框，可以支持目前能见到的所有的代码的风格。但是在antdesign中的引用却很少，经过一些摸索，这里进行总结下

官方链接：

https://www.npmjs.com/package/react-codemirror2

该文章是从我的个人文档迁移过来，平常偶尔会继续更新，可以点击这里查看最新：https://www.yuque.com/simonalong/jishu/dnlsiy

二、前端引入

1.安装

我们这里使用开源的将codemirror跟react结合的一个框架项目，在前端项目根目录下安装该插件

npm install react-codemirror2 codemirror --save

2.antdesign项目引入

// 引入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';

3.使用

<CodeMirror
    value={record.data}
    options={{
         mode: 'groovy',
         theme: 'solarized light',
         lineNumbers: true,
    }}
        
    // 这个必须加上，否则在一些情况下，第二次打开就会有问题 
    onBeforeChange={(editor, data, value) => {
          console.log("onBeforeChange fresh")
          console.log(JSON.stringify(data));
          console.log(JSON.stringify(value));
    }}
        /* HERE: pick out only the value. and might as well get name. */
/>

4.查看界面效果

image.png

三、注意事项

其中react-codemirror2里面有个问题就是在将<CodeMirror>这个放到表单中的时候，onBeforeChange函数（如上所示）必须添加，否则会报错，因为antdesign的那个对参数值修改的函数采用的是onChange，但是CodeMirror采用的是onBeforeChange，所以，必须再封装一层，如上，这样才不会报错，这个问题可看这里

四、扩展

以上是基本的用法，但是我们有时候还有可能需要使用更多的代码风格，以及更多的不同的代码主题，还有代码的折叠凳这些功能，应该怎么办呢，可以直接看codeMirro官网，不过里面东西太多，不好分类，加上最近自己找的一些东西

1.theme风格

https://codemirror.net/demo/theme.html
引用方式：

import 'codemirror/theme/solarized.css';

2.代码模式

https://codemirror.net/mode/
其中常见的代码风格：c，c++，c#，java，scala，object-c等如下的这么几个都是位于clike包中

text/x-csrc (C), text/x-c++src (C++), text/x-java (Java), text/x-csharp (C#), text/x-objectivec (Objective-C),text/x-scala (Scala), text/x-vertex x-shader/x-fragment(shader programs), text/x-squirrel (Squirrel) and text/x-ceylon(Ceylon)

引用：

import 'codemirror/mode/clike/clike';

3.其他配置

其他的一些配置，可以见官网的配置这里
https://codemirror.net/doc/manual.html#config
但是这里全是英文，对英文不是很好的同学还是有点吃力（自己也是哈哈），下面列举一些常见的一些常见的中文链接
https://www.jishux.com/p/1fa59c3b47afc25f
http://www.fdlly.com/p/1730562672.html
https://www.cnblogs.com/Angies/p/7830948.html

五、问题

1.Cannot read property 'length' of undefined

Uncaught TypeError: Cannot read property 'length' of undefined
    at changeEnd (codemirror.js:4601)
    at adjustForChange (codemirror.js:4608)
    at computeSelAfterChange (codemirror.js:4619)
    at makeChangeInner (codemirror.js:5247)
    at CodeMirror.makeChange (codemirror.js:5241)
    at codemirror.js:3906
    at makeChange (codemirror.js:5225)
    at replaceRange (codemirror.js:5452)
    at Doc.replaceRange (codemirror.js:6121)
    at CodeMirror.replaceRange (codemirror.js:9695)
    at UnControlled.hydrate (index.js:528)
    at UnControlled.componentWillReceiveProps (index.js:607)
    at callComponentWillReceiveProps (react-dom.development.js:12708)
    at updateClassInstance (react-dom.development.js:12918)
    at updateClassComponent (react-dom.development.js:14487)
    at beginWork (react-dom.development.js:15335)
    at performUnitOfWork (react-dom.development.js:18150)
    at workLoop (react-dom.development.js:18190)
    at renderRoot (react-dom.development.js:18276)
    at performWorkOnRoot (react-dom.development.js:19165)
    at performWork (react-dom.development.js:19077)
    at performSyncWork (react-dom.development.js:19051)
    at interactiveUpdates$1 (react-dom.development.js:19320)
    at interactiveUpdates (react-dom.development.js:2169)
    at dispatchInteractiveEvent (react-dom.development.js:4880)

有问题源码

<Col lg={24}>
  <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 24 }} label="数据：">
    {form.getFieldDecorator('data', {
        initialValue: drawerRecord.data,
        rules: [{ required: true, message: '请输入数据！' }],
            })(
        <CodeMirror
          options={{
          mode: 'text/x-java',
          theme: 'solarized light',
          lineNumbers: true,
          lineWrapping: true,
        }}

        // onBeforeChange={(editor, data, value) => {
        //   console.log("onBeforeChange fresh")
        //   console.log(JSON.stringify(data));
        //   console.log(JSON.stringify(value));
        // }}
      />
        )}
  </FormItem>
</Col>

添加函数onBeforeChange就可以了

六、参考

antdesign的codeMirror
https://github.com/ZiQiangWang/react-cmirror
https://github.com/codemirror/codemirror
groovy：风格：https://codemirror.net/mode/groovy/index.html
中文配置参考：
https://www.jishux.com/p/1fa59c3b47afc25f
http://www.fdlly.com/p/1730562672.html
https://www.cnblogs.com/Angies/p/7830948.html
//www.greatytc.com/p/4d5ef6808da7
json：代码支持
https://www.cnblogs.com/Angies/p/7830948.html