React Grid Layout - обновить высоту редактора Tinymce после первой инициализации
У меня есть компонент React, который отображает экземпляр редактора tinymce. Цель состоит в том, чтобы динамически изменять размер редактора после его инициализации. Я использую пакет «React Grid Layout» для изменения размера компонента.
2 вопроса: 1. Где я могу найти изменение высоты родительского элемента редактора в компоненте реакции. В каком жизненном цикле? 2. Где следует обновить конфигурацию редактора по его высоте? Внутри метода инициализации?
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);
Спасибо!!
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Реализованное решение было:
При первом рендеринге я инициализирую редактор tinymce следующим образом:
Я вычисляю начальную высоту, на которой должен отображаться редактор, на основе высоты
#wrapper.Я установил высоту
#wrapperв переменнойthis._wrapperHeight.Вместо того, чтобы устанавливать высоту редактора на ту же высоту, что и у
#wrapper, я устанавливаю только 70% от общего значения. Это предотвращает полосы прокрутки. (Я должен сказать, что мне бы хотелось другой реализации этого, потому что, когда я изменяю его размер, чтобы он был слишком маленьким, полосы прокрутки остаются постоянными)this._editorHeight = this._wrapperHeight * 0,7;
Во время инициализации мне также пришлось включить плагин
autoresizeв конфигурацию редактора, а также установитьautoresize_min_height=this._editorHeight
После завершения инициализации динамическое обновление высоты было достигнуто следующим образом:
В
componentWillReceivePropsя снова вычисляю высоту#wrapper.Оцените высоту старой обертки по сравнению с новой.
Если они разные, то: установите новую высоту
tinymce.get(this.props.renderId).theme.resizeTo(this._editorWidth, this._editorHeight);.