限制富文本编辑器可输入高度

限制富文本编辑器可输入高度

应用场景

开发中偶尔会操作富文本编辑器，目前格式各样的富文本编辑器功能都较为完善，但总有自己的某个定制化需求没法在众多编辑器中寻求到手。本文以“限制富文本编辑器可输入高度”为例，提供详细的解决方法和解决此类问题的思路。

---

以目前应用较多的、基于Draft.js封装的富文本编辑器举例。
例如BraftEditor富文本编辑器，限制编辑器的可输入高度过程如下：

1、获取编辑器实例对象

以react为例：如图绑定ref获取实例对象

打印实例对象

实例对象中有我们要用得到的undo()、getDraftInstance()等方法

2、根据实例对象中可用的数据或方法制定最终方案

• 最终代码如下：

//handleChange 为编辑器内每有变动时调用
handleChange = (editorState) => {
    //获取文档中内容最后一个元素的所在高度
    let contentHeight = this.state.instance.getDraftInstance().editor.lastElementChild.clientHeight
    //设置自己想要的最大高度，超出高度时用撤销方法撤销上一次变动。
    if (contentHeight > 588) {
      this.state.instance.undo() //撤销上一次变动
      return
    }
}

3、方法不止其一种，例如高度的获取可以获取编辑器内所有内容的总高度，撤销操作也可以换成用编辑器上一次的内容去替换这一次内容来达到撤销的目的等等。当然，一定先看看编辑器本身是否提供相应的现成API，直接使用肯定最为省事