解决表单内无法使用codemirror初始化失败、格式不对齐、行号错位等问题（codemirror react使用专题及常见问题）

codemirror react使用专题及常见问题

• 如何使用
• 你可能会遇到的问题

在使用Ant Desgin Pro进行业务开发的过程中，遇到需要编辑/展示JSON配置的需求。

Ant Design推荐使用react-codemirror2 或者 react-monaco-editor作为代码编辑器，然后我选择了react-codemirror2进行功能实现。

如何使用

• Step1：npm install react-codemirror2 codemirror --save

• Step2：使用

  Q1：想换编辑器的底色、代码的颜色？

  在node_modules里找到codemirror文件夹，就可以看到theme文件夹，里面是可以选择的主题。（Tips：neo、mdn-like、eclipse是为数不多背景色是白色/浅色的主题噢；深色主题推荐dracula，就…挺好看的！下面是展示图）
  

  Q2：我编辑器要写JSON的！

  在node_modules里找到codemirror文件夹，就可以看到mode文件夹，里面是可以选择的模式。需要JSON的小伙伴可以通过引入模式里的javascript.js文件，options里的mode的值指定为{name: "javascript", json: true}即可！（官网有说mode可以是一个字符串，也可以是与该模式关联的MIME类型。同理，需要css的就引入css.js文件，mode指定css。）

  Q3：想给编辑器添个高度，换下字号改下样式啥的

  通过给CodeMirror组件添加一个外层元素，然后给这个外层元素增加一个样式，在样式里覆盖.CodeMirror的样式即可！下面是调了高度的和字体的展示：
  

   require('codemirror/lib/codemirror.css');
   require('codemirror/theme/dracula.css'); // 按需引入主题
   require('codemirror/mode/javascript/javascript.js'); // 按需引入模式
   import { Controlled as CodeMirror} from 'react-codemirror2'
   import styles from './TestDemo.less'; // 按需修改
   
   class TestDemo extends PureComponent {
     state = {
       content: ''
     }
   
     render() {
       return (
         <div className={styles.CodeMirrorWrapper}>
           <CodeMirror
             value={this.state.content}
             options={{
               mode: {name: "javascript", json: true}, // string|object
               theme: 'dracula',
               lineNumbers: true
             }}
             onBeforeChange={(editor, data, value) => {
               this.setState({ content: value });
             }}
             onChange={(editor, data, value) => {
             }}
           />
         </div>
       )
     }
   }
  

   .CodeMirrorWrapper {
     :global {
       .CodeMirror {
         height: 600px; // 组件默认高度是300px
         font: 14px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace; // 字体和双引号更符合我们平时打代码的习惯
       }
     }
   }
   ```
  

你可能会遇到的问题

Q1.在表单里使用CodeMirror，无法赋初始值，无法正常输入？

翻看Ant Design组件文档，可以看到Form表单是支持使用自定义表单控件。按道理我们直接把CodeMirror的value值去掉就可以了呀，然而会发现无法正常使用。这是因为CodeMirror改变值使用的是onBeforeChange={(editor, data, value) => {}方法，而getFieldDecorator使用的是onChange。因此，我们可以通过在外部多加一层元素解决。

此外，CodeMirror组件可以放在任意一个地方，只需要通过getFieldValue、setFieldsValue方法使用即可。

正确使用姿势：

<FormItem label="" {...formLayout}>
  {getFieldDecorator('content',{
    initialValue: current.id ? current.content : ''
  })(
     <div className={styles.CodeMirrorWrapper}>
        <CodeMirror
          value={this.props.form.getFieldValue('content')}
          options={{
            mode: {name: "javascript", json: true},
            theme: 'dracula', // neo、mdn-like、eclipse
            lineNumbers: true
          }}
          onBeforeChange={(editor, data, value) => {
            this.props.form.setFieldsValue({ content: value });
          }}
          onChange={(editor, data, value) => {
          }}
        />
      </div>
  )}
</FormItem>

Q2.格式不对齐、行号错位的样式问题？

利用setTimeout延长100ms获取数据的时间.

本文地址：https://blog.csdn.net/qq_42203909/article/details/112506413