富文本编辑器，当底部有空行存在时，渲染出来的效果就很丑
会有如图所示的空行显示，将单元格撑高了。在不专业的用户眼里，他并不知道这是由于他自己输入的回车导致的如图效果，也不知道可以重新编辑将空行删掉解决问题。
所以，如果要让用户闭嘴，我们可以这样处理。增加一个配置项，开启之后，文本底部有空行的自动去除。
观察富文本源代码发现，空行是由<p>&npsp;</p>组成，并且每一行代码最后都有一个隐藏的换行符。观察保存接口，发现是\n换行符。
处理底部空行数据，可以通过\n换行符分隔数据，再反序遍历数据，空行的数据就删掉，直到不是空行的数据就停止遍历。这样就只会删除底部的空行数据，文本中的空行数据就可以保留了。
let result = ''
// 是否隐藏尾部空行
let hiddenTailEmptyLines = 1
// 获取其他属性
const otherJsonStr = this.otherJsonMap[dataSetCode]
if (otherJsonStr) {
const otherJson = JSON.parse(otherJsonStr)
hiddenTailEmptyLines = otherJson && otherJson.hiddenTailEmptyLines ? 1 : 0
}
// 开启隐藏尾部空行处理
if (hiddenTailEmptyLines === 1) {
// 根据换行符拆分数组
const arr = item.val.split('\n')
// 倒序遍历
for (let i = arr.length - 1; i >= 0; i--) {
// 获取当前行html
const lineHtml = arr[i]
// 当前行为空行
if (lineHtml === '<p> </p>') {
// 删除空行
arr.splice(i, 1)
// 当前行不为空行 结束循环
} else {
break
}
}
// 重新组合结果
result = arr.join('\n')
}
return result
发表评论