摩纳哥编辑器可动态调整大小

问题描述

我一直在寻找有关以下问题的讨论:在整个Internet上使用 Monaco Editor 的字段时，是否有可能模仿html标签textarea的大小调整，但我找不到一个回答我的问题.

I have been searching for a discussion about if it's possible to mimic the html tag textarea's resizing when using Monaco Editor's field all over the Internet but I couldn't find one answering my question.

我在 React 应用程序中使用 monaco-editor npm软件包.您是否知道这是否易于实现?

I'm using the monaco-editor npm package in a React application. Do you have any idea if this is easy to implement?

解决方案
使用纯CSS，我选择了目标html元素，并添加了以下属性:

SOLUTION
With pure css I selected the target html element and just added these properties:

div {
  resize: vertical;
  overflow: auto;
}

推荐答案

TL; DR:在编辑器的配置中添加 automaticLayout:true .

TL;DR: add automaticLayout: true to your editor's configuration.

NL; PR:

摩纳哥具有内置的自动调整大小以适应父容器的功能:

Monaco has a built-in auto resize to parent container functionality:

反应> = 16.3.0(推荐)

constructor(props){super(props); this.editorDiv = React.createRef();}

render(){
 return <div ref={this.editorDiv} className="editor" ></div>
}

componentDidMount(){
 let editor = monaco.editor.create(this.editorDiv.current, {
        value: "var x = 0;",
        language: 'javascript',
        automaticLayout: true // the important part
      });
}

反应< 16.3.0

render(){
 return <div ref={el=>{this.editorDiv = el}} className="editor" ></div>
}
 // I use this configuration in the editor:
componentDidMount(){
 let editor = monaco.editor.create(this.editorDiv, {
        value: "var x = 0;",
        language: 'javascript',
        automaticLayout: true // the important part
      });
}

还有编辑器的CSS(避免了第一次以10px的高度渲染编辑器):

And the CSS for the editor (it avoids rendering the editor for the first time with like 10px height):

.editor{
 height: 100%;
}

摩纳哥版本:^ 0.10.1，上次测试时间:0.20.0

Monaco Version: ^0.10.1, last tested: 0.20.0

注意:<版本0.20.0:该机制不会监听其容器大小的更改，它会轮询它们.

Note:< Version 0.20.0: The mechanism does not listen to its container size changes, it polls them.

@ nrayburn-tech(摩纳哥编辑的贡献者):版本0.20对所有浏览器都使用MutationObserver.0.21版及更高版本在支持的浏览器上使用ResizeObserver，否则，它将轮询用作备用.

@nrayburn-tech (Monaco Editor's contributor): Version 0.20 uses MutationObserver for all browsers. Version 0.21 and later uses ResizeObserver on supported browsers, otherwise, it uses polling as a fallback.

这篇关于摩纳哥编辑器可动态调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！