React Grid Layout-首次初始化后更新Tinymce编辑器的高度

Question

I have a React Component that renders an instance of tinymce editor.The goal is to resize the editor's height dynamically after it has been initialized. I am using "React Grid Layout" package to resize the component.

2 Questions: 1. Where can I look up for the change in height of the editor's parent within the react component.In which lifecycle? 2. Where should Update the editor configuration for its height? Within the init method?

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

Part of my solution is to determine the parent's height like this:

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

If there is any difference before and after resizing with React Grid Layout this parent Height will show the difference in size.

After I have found the height and determine the height change (but where? that is my question 1). I would update the tinymce configuration with:

editorinstance.theme.resizeTo (width, height);

Thank you!!

Answer 1

The implemented solution was:

On first render, I initialize the tinymce editor as follows:

1. I calculate the initial height at which the editor should be rendered based on #wrapper height.

2. I set the for the #wrapper 's height in a variable called this._wrapperHeight .

3. Instead of setting the editor's height to the same height as the #wrapper , I adjust it to be only 70% of the total value. This prevents scrollbars. (I must say, I would like a different implementation to this because when I resize it to be too small the scrollbars are persistent)

   this._editorHeight = this._wrapperHeight * 0.7;

4. During init, the I also had to include the plugin autoresize in the editor's configuration and also set the autoresize_min_height=this._editorHeight

After initialization has been accomplished, updating the height dynamically was achieved as follows:

1. In componentWillReceiveProps I calculate the #wrapper 's height again.

2. Evaluate the old wrapper's height vs the new one

3. If they are different then: set the new height tinymce.get(this.props.renderId).theme.resizeTo(this._editorWidth, this._editorHeight);