首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >如何使用react- Monaco editor实现monaco编辑器的动态大小调整?

如何使用react- Monaco editor实现monaco编辑器的动态大小调整?
EN

Stack Overflow用户
提问于 2020-09-29 03:12:04
回答 1查看 163关注 0票数 0

我正在使用react应用程序中的react-monaco-editor库来查看文档。

对于特定的heightwidth,代码如下所示

代码语言:javascript
复制
import MonacoEditor from 'react-monaco-editor';


class DocView extends React.Component<any, any> {
  constructor(props){
    super(props);
  }

  onChange(newValue, e) {
    console.log('onChange', newValue, e);
  }

  public render(): JSX.Element {
    const {t} = this.props;
    const options = {
      selectOnLineNumbers: true,
      readOnly: true,
    };
    
    return (
      <>
      ...
      <div>
        <MonacoEditor
          width={900}
          height={420}
          language="yaml"
          theme="vs-dark"
          defaultValue=''
          options={options}
          value={this.props.code}
          onChange={this.onChange}
        />
      </div>
       ...
      </>
    );
  }
}

我想根据窗口大小更改widthheight。我如何才能做到这一点?

我看过很多与monaco-editor相关的答案,但没有一个明确使用react-monaco-editor

谢谢你的指点。

EN

回答 1

Stack Overflow用户

发布于 2020-10-03 17:29:24

widthheight属性支持所有HTML参数值作为字符串。它们默认使用100%来填充整个可用空间。这样,您就可以将编辑器包装到div中,您可以为该div设置特定的动态大小,或者让它参与网格或框布局。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/64108234

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档