安装
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>