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