0

除非并且直到我不更改组件的大小（可调整大小），否则不会显示 AceEditor

如果我添加任何其他 HTML 元素，例如

有没有办法让 Ace 编辑器在没有任何库的情况下调整大小。

<Resizable
    defaultSize={{
        width: 'auto',
        height: 'auto',
    }}
    className="resizable-component"
>
    <AceEditor
        width="auto"
        height="100%"
        mode="html"
        theme="monokai"
        readOnly={false}
        focus={autofocus}
        onBlur={onBlur && (event => onBlur(id, event.target.value))}
        onFocus={onFocus && (event => onFocus(id, event.target.value))}
        onChange={this._onChange}
        wrapEnabled={true}
        showPrintMargin={true}
        maxLines={40}
        minLines={8}
        highlightActiveLine={true}
        setOptions={{
            enableBasicAutocompletion: true,
            enableLiveAutocompletion: true,
            enableSnippets: false,
            showLineNumbers: true,
            tabSize: 2,
        }}
    />
</Resizable>

额外问题：如何获得取决于窗口大小的最大线。

版本：

“可重新调整大小”：“6.2.0” “react-ace”：“8.0.0”

4

1 回答 1

0

editor.resize更改编辑器大小时需要调用https://codesandbox.io/s/festive-wildflower-8trs0

import React from "react";
import { render } from "react-dom";
import { Resizable } from "re-resizable";

import "ace-builds";

import AceEditor from "react-ace";
//import "ace-builds/webpack-resolver"

const style = {
  border: "solid 1px #ddd",
  background: "#f0f0f0"
};

const App = () => {
  var editorComponent;
  return (
    <Resizable
      style={style}
      defaultSize={{
        width: "auto",
        height: 200
      }}
      onResizeStop={() => {
        if (editorComponent) editorComponent.editor.resize();
      }}
    >
      <AceEditor
        ref={el => (editorComponent = el)}
        width="100%"
        height="100%"
        readOnly={false}
        wrapEnabled={true}
        showPrintMargin={true}
        highlightActiveLine={true}
        setOptions={{
          enableBasicAutocompletion: true,
          enableLiveAutocompletion: true,
          enableSnippets: false,
          showLineNumbers: true,
          tabSize: 2
        }}
      />
    </Resizable>
  );
};

render(<App />, document.getElementById("root"));

最大行选项的要点是根据编辑器内的文本设置大小，如果您希望编辑器大小取决于窗口大小，请设置使用高度

于 2020-02-26T09:04:49.563 回答