AceEditor的坑

原创于 2024-03-24 21:49:43 发布 · 470 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #前端 #javascript

json输入框专栏收录该内容

1 篇文章

订阅专栏

博客围绕AceEditor展开，提到安装和使用中遇到的问题。当宽度设置过长，页面会出现竖线，去掉font可消除竖线，但会使光标获取焦点位置错乱。还介绍了正确设置，即覆盖ace_editor的宽度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装

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>