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);