AceEditor的坑

安装

npm install react-ace react-ace-editor ace-builds 

问题

用AceEditor，如果宽度设置过长，页面显示会有一条竖线，当时发现去掉font（font: inherit; ），就可以去掉这条线，但是会导致光标获取焦点位置错乱

正确设置: 覆盖ace_editor的宽度

.aceEdit {
	:global( .ace editor) f
		width: auto;
	}}

用法

import AceEditor from 'react-ace'
<Form.Item name='json' label="json示例" rules={[{ required: true, message: '请输入json示例' }]}>
          <AceEditor
            mode="javascript"
            theme="github"
            //   onChange={onChange}
            // value={value}
            name="UNIQUE_ID_OF_DIV"
            editorProps={{ $blockScrolling: true }}
            height={'200px'}
            width='100%'
            showGutter={true}
            highlightActiveLine={true}
            enableBasicAutocompletion={true}
            enableLiveAutocompletion={true}
            setOptions={{
              firstLineNumber: 1,
              highlightGutterLine: true,
              displayIndentGuides: false,
              animatedScroll: true,
              autoScrollEditorIntoView: true,
              fontSize: 12,
            }}
          />
        </Form.Item>