React Grid Layout - обновить высоту редактора Tinymce после первого инициализации

Question

У меня есть React Component, который визуализирует экземпляр редактора tinymce. Цель состоит в том, чтобы динамически изменить высоту редактора после его инициализации. Я использую пакет «React Grid Layout» для изменения размера компонента.

2 вопроса: 1. Где я могу посмотреть на изменение высоты родительского элемента редактора в компоненте реагирования. В каком жизненном цикле? 2. Где следует обновить конфигурацию редактора для его высоты? В рамках метода init?

render(){
  <div id="wrapper">
      <textArea id="tinymceSelector"></textArea>
  </div>
}

Часть моего решения - определить рост родителя следующим образом:

let parentHeight = document.getElementById('wrapper').clientHeight 

Если есть разница до и после изменения размера с помощью React Grid Layout, эта родительская высота покажет разницу в размере.

После того, как я нашел высоту и определил изменение высоты (но где? Это мой вопрос 1). Я бы обновил конфигурацию tinymce:

editorinstance.theme.resizeTo (width, height);

Спасибо!

Answer 1

Реализовано решение:

При первом рендере я инициализирую редактор tinymce следующим образом:

1. Я рассчитываю начальную высоту, на которой должен отображаться редактор, на основе #wrapper высоты.

2. Я установил высоту #wrapper в переменной с именем this._wrapperHeight.

3. Вместо того, чтобы устанавливать высоту редактора на ту же высоту, что и #wrapper, я настраиваю ее на 70% от общего значения. Это предотвращает полосы прокрутки. (Должен сказать, я хотел бы реализовать эту реализацию иначе, потому что когда я изменяю ее размер, чтобы она была слишком маленькой, полосы прокрутки остаются постоянными)

   this._editorHeight = this._wrapperHeight * 0,7;

4. Во время инициализации мне также пришлось включить плагин autoresize в конфигурацию редактора, а также установить autoresize_min_height=this._editorHeight

После завершения инициализации динамическое обновление высоты было достигнуто следующим образом:

1. В componentWillReceiveProps я снова вычисляю высоту #wrapper.

2. Оцените высоту старой оболочки по сравнению с новой

3. Если они отличаются, то: установите новую высоту tinymce.get(this.props.renderId).theme.resizeTo(this._editorWidth, this._editorHeight);