0

我得到嵌入react-ace. react-split在这里，我在两个窗格中嵌入了两个编辑器，并let x = "this line got scrolled left"在第一个窗格的第一行输入：

在此处输入图像描述

在键入代码时，只要我点击div编辑器前面黄色标题中文本的最右边空白处，Ace 就会在我键入时开始向左滚动该行。我随后可以将文本滚动回视图，但 Ace 不允许我将光标定位到编辑器中该点的右侧。

如果我从每个窗格中删除前面的黄色标题，Ace 的行为就好像这个滚动点是第一个字符，因此在我键入时永远不会让我看到这些字符。

就好像浏览器认为窗格有一个宽度，而 Ace 认为它有另一个宽度，该宽度是使用编辑器在窗格中显示其他任何内容所需的最小宽度。

这是我的 React，用nextjs实现：

import Split from 'react-split'
import AceEditor from 'react-ace'
import 'brace/mode/javascript'

export default function Home() {
  return (
    <main className="outermost">
      <Split
        className="my_split"
        sizes={[50, 50]}
        minSize={100}
        expandToMin={false}
        gutterSize={10}
        gutterAlign="center"
        snapOffset={0}
        direction="horizontal"
      >
        <CodePane id="left_pane" />
        <CodePane id="right_pane" />
      </Split>
    </main>
  )
}

function CodePane(props: {id: string}) {
  return <div id={props.id} className="code_pane">
    <div className="pane_header">Right code margin |</div>
    <AceEditor
      name={props.id + "_editor"}
      mode="javascript"
      height="100%"
      width="100%"
    />
  </div>;
}

这是我的CSS：

body {
  padding: 0;
  margin: 0;
}

* {
  box-sizing: border-box;
}

.outermost {
  width: 100%;
  height: 100vh;
  background-color: darkblue;
  padding: 20px;
}

.my_split {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  background-color: lightgray;
}

.pane_header {
  background-color: yellow;
  width: 100%;
  height: 20px;
}

.code_pane {
  height: 100%;
  background-color: red;
}

.split,
.gutter.gutter-horizontal {
  height: 100%;
}

我尝试实施react-split文档中的 CSS 建议。我也实现了这个float:left并遇到了同样的问题。我可能弄错了，因为我发现文档很难理解。

我在 CSS 中做错了吗？谢谢你尽你所能的帮助。

（注意：我意识到 Ace 提供了一种拆分编辑器的方法，但这不是我想要在我的应用程序中做的事情。我只是使用两个编辑器进行演示。）

4

1 回答 1

0

afk-mario在 GitHub 上提供了一个答案，我将对其进行总结。

Ace 编辑器会重新计算其大小以响应窗口resize事件，因此我可以通过手动发出此事件来强制重新计算。

将以下内容添加到 ReactcomponentDidMount()和 Split 的onDragEnd()处理程序可以解决问题：

window.dispatchEvent(new Event('resize'));
于 2020-09-06T23:55:36.037 回答