0

我有一个渲染 tinymce 编辑器实例的 React 组件。目标是在初始化后动态调整编辑器的高度。我正在使用“React Grid Layout”包来调整组件的大小。

2个问题： 1.在react组件中哪里可以查看编辑器父级的高度变化。在哪个生命周期？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);

谢谢！！

4

1 回答 1

0

实施的解决方案是：

在第一次渲染时，我初始化 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);

于 2018-05-04T16:20:29.287 回答