一、背景

在后端管理界面中，有時(shí)候我們需要能夠?qū)⒁恍┡渲么a能夠在代碼中進(jìn)行配置，如果用普通的TextArea可視化不是很好，codemirror算是業(yè)界在Js里面做的很不錯(cuò)的一個(gè)代碼編輯框，可以支持目前能見(jiàn)到的所有的代碼的風(fēng)格。但是在antdesign中的引用卻很少，經(jīng)過(guò)一些摸索，這里進(jìn)行總結(jié)下

官方鏈接：

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

該文章是從我的個(gè)人文檔遷移過(guò)來(lái)，平常偶爾會(huì)繼續(xù)更新，可以點(diǎn)擊這里查看最新：https://www.yuque.com/simonalong/jishu/dnlsiy

二、前端引入

1.安裝

我們這里使用開源的將codemirror跟react結(jié)合的一個(gè)框架項(xiàng)目，在前端項(xiàng)目根目錄下安裝該插件

npm install react-codemirror2 codemirror --save

2.antdesign項(xiàng)目引入

// 引入codemirror封裝
import {UnControlled as CodeMirror} from 'react-codemirror2'
import 'codemirror/lib/codemirror.css';

// 主題風(fēng)格
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,
    }}
        
    // 這個(gè)必須加上，否則在一些情況下，第二次打開就會(huì)有問(wèn)題 
    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

三、注意事項(xiàng)

其中react-codemirror2里面有個(gè)問(wèn)題就是在將<CodeMirror>這個(gè)放到表單中的時(shí)候，onBeforeChange函數(shù)（如上所示）必須添加，否則會(huì)報(bào)錯(cuò)，因?yàn)閍ntdesign的那個(gè)對(duì)參數(shù)值修改的函數(shù)采用的是onChange，但是CodeMirror采用的是onBeforeChange，所以，必須再封裝一層，如上，這樣才不會(huì)報(bào)錯(cuò)，這個(gè)問(wèn)題可看這里

四、擴(kuò)展

以上是基本的用法，但是我們有時(shí)候還有可能需要使用更多的代碼風(fēng)格，以及更多的不同的代碼主題，還有代碼的折疊凳這些功能，應(yīng)該怎么辦呢，可以直接看codeMirro官網(wǎng)，不過(guò)里面東西太多，不好分類，加上最近自己找的一些東西

1.theme風(fēng)格

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

import 'codemirror/theme/solarized.css';

2.代碼模式

https://codemirror.net/mode/
其中常見(jiàn)的代碼風(fēng)格：c，c++，c#，java，scala，object-c等如下的這么幾個(gè)都是位于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.其他配置

其他的一些配置，可以見(jiàn)官網(wǎng)的配置這里
https://codemirror.net/doc/manual.html#config
但是這里全是英文，對(duì)英文不是很好的同學(xué)還是有點(diǎn)吃力（自己也是哈哈），下面列舉一些常見(jiàn)的一些常見(jiàn)的中文鏈接
https://www.jishux.com/p/1fa59c3b47afc25f
http://www.fdlly.com/p/1730562672.html
https://www.cnblogs.com/Angies/p/7830948.html

五、問(wèn)題

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)

有問(wèn)題源碼

<Col lg={24}>
  <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 24 }} label="數(shù)據(jù)：">
    {form.getFieldDecorator('data', {
        initialValue: drawerRecord.data,
        rules: [{ required: true, message: '請(qǐng)輸入數(shù)據(jù)！' }],
            })(
        <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>

添加函數(shù)onBeforeChange就可以了

六、參考

antdesign的codeMirror
https://github.com/ZiQiangWang/react-cmirror
https://github.com/codemirror/codemirror
groovy：風(fēng)格：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
http://www.itdecent.cn/p/4d5ef6808da7
json：代碼支持
https://www.cnblogs.com/Angies/p/7830948.html