codemirror antdesign結(jié)合

一罪郊、背景

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

官方鏈接：

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

該文章是從我的個人文檔遷移過來拴曲，平常偶爾會繼續(xù)更新，可以點擊這里查看最新：https://www.yuque.com/simonalong/jishu/dnlsiy

二凛忿、前端引入

1.安裝

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

npm install react-codemirror2 codemirror --save

2.antdesign項目引入

// 引入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,
    }}
        
    // 這個必須加上店溢，否則在一些情況下叁熔，第二次打開就會有問題 
    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函數(shù)（如上所示）必須添加荣回，否則會報錯，因為antdesign的那個對參數(shù)值修改的函數(shù)采用的是onChange戈咳，但是CodeMirror采用的是onBeforeChange心软，所以，必須再封裝一層著蛙，如上删铃，這樣才不會報錯，這個問題可看這里

四踏堡、擴展

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

1.theme風(fēng)格

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

import 'codemirror/theme/solarized.css';

2.代碼模式

https://codemirror.net/mode/
其中常見的代碼風(fēng)格：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.其他配置

其他的一些配置，可以見官網(wǎng)的配置這里
https://codemirror.net/doc/manual.html#config
但是這里全是英文绕辖，對英文不是很好的同學(xué)還是有點吃力（自己也是哈哈）摇肌，下面列舉一些常見的一些常見的中文鏈接
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="數(shù)據(jù)：">
    {form.getFieldDecorator('data', {
        initialValue: drawerRecord.data,
        rules: [{ required: true, message: '請輸入數(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.reibang.com/p/4d5ef6808da7
json：代碼支持
https://www.cnblogs.com/Angies/p/7830948.html