<p>react-ace dalam wadah yang dapat diubah ukurannya</p>

@MartinHaeusler terima kasih untuk masalah ini. Saya sedang mengerjakan ini sekarang. seharusnya keluar di 4.4.0 dan akan masuk 5.0.0 saat itu keluar

@MartinHaeusler ini keluar sekarang di 4.4.0 Terima kasih

Terima kasih atas respon yang sangat cepat ini! Saya baru saja memutakhirkan package.json saya untuk menggunakan 4.4.0 dan berfungsi dengan sangat baik, terima kasih!

@MartinHaeusler, bisakah Anda membagikan tautan ke solusi yang Anda buat?

@dmigo : Saya mencoba menggunakan react-measure untuk pekerjaan itu. Namun, itu hanya berhasil dalam beberapa kasus, tidak semuanya. Selalu ada beberapa kasus sudut aneh yang tersisa di mana editor tidak akan berperilaku sebagaimana dimaksud. Pada akhirnya, saya beralih dari Ace ke CodeMirror karena alasan itu. Saya memiliki beberapa masalah di sana juga dengan membuat sesuatu dapat diubah ukurannya dan harus melakukan beberapa peretasan yang cukup buruk, tetapi itu berhasil sekarang. Maaf, saya membuang prototipe untuk editor react-ace yang dapat diubah ukurannya segera setelah itu. Tapi itu tidak pernah benar-benar berfungsi dengan baik seperti yang dimaksudkan.

@securingsincity
Mencoba menerapkan sesuatu yang mirip dengan apa yang dilakukan @MartinHaeusler , saya menemukan perilaku yang menarik dari react-ace . Tampaknya resize() tidak terjadi dengan benar.
Setelah beberapa penyelidikan ternyata this.editor.resize() dipanggil pada componentWillReceiveProps yang terjadi sebelum render .
Akan lebih masuk akal untuk memanggil this.editor.resize() selama componentDidUpdate , setelah render terjadi dan ace-editor menerima nilai baru untuk height dan width .
Jika kami setuju, maka saya akan dengan senang hati memperbaikinya untuk Anda (bersama dengan #212). Apa yang akan Anda sampaikan?

@dmigo kedengarannya bagus! Jika kita pikir itu bisa menyelesaikan masalah, mari kita lakukan

@dmigo Tangkapan yang bagus! Itu mungkin menjadi masalah bagi saya juga.

Aku terserah!

Saya memutakhirkan ke 5.1.2 dan memanggil AceEditor dengan alat peraga:

mode: 'json',
theme: 'chrome',
readOnly: true

Apakah ada yang perlu saya tambahkan untuk mengubah ukurannya ke wadah?

Apakah ada yang perlu saya tambahkan untuk mengubah ukurannya ke wadah?

Adakah yang tahu cara mengubah ukuran wadah secara otomatis berdasarkan kontrol pengguna? Saya mencoba untuk:

1. izinkan pengguna untuk secara aktif mengubah ukuran wadah melalui properti CSS resize: vertical (mis., izinkan pengguna menyeret sudut kanan bawah untuk mengubah ukuran).
2. secara otomatis mengubah ukuran wadah berdasarkan jumlah baris yang telah dimasukkan pengguna. Dengan tinggi default 500px, jika pengguna memasukkan >27 baris, tinggi editor tetap sama, sambil membuat wadah dapat digulir untuk menambah ruang ekstra. Saya ingin wadah tumbuh (atau menyusut ke ketinggian minimum) berdasarkan baris yang dimasukkan.

Adakah yang tahu cara mengubah ukuran wadah secara otomatis berdasarkan kontrol pengguna?

Saya berhasil dengan menggunakan react-resize-detector

import AceEditor from 'react-ace'
import ReactResizeDetector from 'react-resize-detector'

export default class myComponent extends Component {

  constructor (props) {
    super(props)
    this.state = {
      editorHeight: 400,
      editorWidth: "auto"
    }
    this.onResize = this.onResize.bind(this)
  }


  onResize (w, h) {
    this.setState({
      editorHeight: h,
      editorWidth: w
    })
  }

  render () {
    <div className="resizable">
     <ReactResizeDetector handleWidth handleHeight onResize={this.onResize} />
     <AceEditor
       height={this.state.editorHeight}
       width={this.state.editorWidth}
     />
    </div>
  }
}

CSS dari kelas resizable

.resizable {
    overflow: auto;
    resize: both;
    height: 400px;
    width: auto;
}

di sini adalah solusi css murni, menggunakan resize: both pada editor div

<AceEditor
  onLoad={editorInstance => {
    editorInstance.container.style.resize = "both";
    // mouseup = css resize end
    document.addEventListener("mouseup", e => (
      editorInstance.resize()
    ));
  }}
/>

kelemahan: pada pengubahan ukuran yang lebih besar, konten editor disembunyikan

di sini adalah biola demo dengan vanilla js

Terima kasih @milahu solusi Anda bekerja dengan sempurna untuk kasus penggunaan saya.

Terima kasih @milahu sangat bervariasi. Solusi Anda sangat membantu. Selain itu, akan lebih baik menggunakan acara "window.onresize".