web-dev-qa-db-ja.com

モナコエディターは動的にサイズ変更可能

インターネット全体でMonaco Editorのフィールドを使用しているときにhtmlタグのtextareaのサイズ変更を模倣することが可能かどうかについてのディスカッションを検索してきましたが、質問に答えるものが見つかりませんでした。

Reactアプリケーションでmonaco-editor npmパッケージを使用しています。これが簡単に実装できるかどうか考えていますか？

前もって感謝します！

[〜＃〜]ソリューション[〜＃〜]
純粋なcssを使用して、ターゲットhtml要素を選択し、次のプロパティを追加しました：

div {
  resize: vertical;
  overflow: auto;
}
javascriptnode.jsreactjsmonaco-editor
10
elenaHristova

TL; DR：automaticLayout: trueをエディターの構成に追加します。

NL; PR：

モナコには、親コンテナー機能への自動サイズ変更が組み込まれています。

反応> = 16.3.0（推奨）

constructor(props){super(props); this.ref = 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
      });
}

React <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のような高さでエディターを初めてレンダリングすることを避けます）

.editor{
 height: 100%;
}

モナコバージョン：^ 0.10.1、最終テスト：0.12.0

注：メカニズムはコンテナサイズの変更をリッスンせず、 ポーリングする です。

18
David I. Samudio

エディターへの参照がある場合は、サイズ変更イベントでeditor.layout()を呼び出すだけです。たとえば、ウィンドウのサイズ変更：

window.onresize = function (){
    editor.layout();
};

お役に立てれば。

5
SimperT

私の場合、私はその正確なCSSを使用していますが、automaticLayout：trueは機能しますが、やりすぎを発見しました（DOMの100ms間隔をプールしているようで、ドキュメントでいくつかのエディターを開いています。SO I手動で実装することになりました：

念のため、私のニーズは異なります。ユーザーにコンテナのサイズを変更してもらいたいです-標準的な方法で、ライブラリとパフォーマンスの点で（コードとパフォーマンスの両方で）安価です。これは私がやったことです：

cssコンテナ：resize: vertical; overflow: auto

そしてこのjs：

function installResizeWatcher(el, fn, interval){
  let offset = {width: el.offsetWidth, height: el.offsetHeight}
  setInterval(()=>{
    let newOffset = {width: el.offsetWidth, height: el.offsetHeight}
    if(offset.height!=newOffset.height||offset.width!=newOffset.width){
      offset = newOffset
      fn()
    }
  }, interval)
}
  const typeScriptCodeContainer = document.getElementById('typeScriptCodeContainer')
  typeScriptCodeEditor = monaco.editor.create(typeScriptCodeContainer, Object.assign(editorOptions, {value: example.codeValue}))
  installResizeWatcher(typeScriptCodeContainer, typeScriptCodeEditor.layout.bind(typeScriptCodeEditor), 2000)

はい、2秒間隔で、1回だけ登録されるようにします。私はモナコでの自動再レイアウトのために100msのサイズ変更間隔がある/だったと思います-IMHOは多すぎます。

実際に見てみましょう： https://TypeScript-api-playground.glitch.me/?example=2

2
cancerbero

これは古い質問ですが、問題を解決して react-resize-detector で解決してください

ResizeObserver に基づいていますニーズに完全に対応します（ ブラウザの互換性 を確認してください）

コンポーネントの例：

import React, { Component } from 'react';
import ReactResizeDetector from 'react-resize-detector';
import * as monaco from 'monaco-editor';

class Editor extends Component {
    constructor(props) {
        super(props)

        this.state = {
            width: 0,
            height: 0,
        }
        this.editor_div = React.createRef()

        this.handle_rezise = this.handle_rezise.bind(this);
    }

    componentDidMount() {
        const editor_model = monaco.editor.createModel('', 'sql');
        this.monaco_editor = monaco.editor.create(this.editor_div.current, this.props.editorOptions);
        this.monaco_editor.setModel(editor_model);
    }

    componentWillUnmount() {
        this.monaco_editor && this.monaco_editor.dispose();
    }

    handle_rezise(width, height) {
        this.monaco_editor.layout({ height, width });
    }

    render() {
        return(
            <div 
                className="editor-container"
                style={{ height: '100%' }}>
                <ReactResizeDetector
                    handleWidth
                    handleHeight
                    onResize={ this.handle_rezise }
                    refreshMode="debounce"
                    refreshRate={100} />
                <div 
                    className="editor"
                    ref={ this.editor_div }
                    style={{ height: '100%' }} />
            </div>
        )
    }
}

export default Editor;

それが役に立てば幸い

0
Naej56