【HTML】自定义富文本设置行高

43 阅读 0 评论 29 点赞

我是靠谱客的博主勤奋黄蜂，最近开发中收集的这篇文章主要介绍【HTML】自定义富文本设置行高，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

问题：由于设置行高没有类似设置字体或字体大小那样，比如设置字体样式

document.execCommand('styleWithCSS', false, true)
document.execCommand('fontname', false, '微软雅黑')

这就需要我们自己去实现行高的效果：

// 设置行距
export const lineHeight = (value) => {
// 获取当前的选区
let selection = window.getSelection()
if (selection.rangeCount === 0) {
return
}
let range = selection.getRangeAt(0)
// 选中区域的html
let outSpan = document.createElement('span')
outSpan.style.cssText = 'line-height: ' + value + ';display: inline-block;'
outSpan.appendChild(range.cloneContents())
let content = setLineHeight(outSpan.innerHTML, value)
// 选取中的纯文本
let txt = range.extractContents().textContent
let length = txt.length
if (length === 0) {
return
}
// 删除被选择的内容
range.deleteContents()
// 创建新的元素
let span = document.createElement('span')
span.style.cssText = 'line-height: ' + value + ';display: inline-block;'
// 设置 span 内容
span.innerHTML = content
// 在被选择的位置设置行距的元素
range.insertNode(span)
}
// 设置指定行距
function setLineHeight (content, value) {
let reg = /line-heights*:s*(d+(.*d+)?)/ig
let c = content.replace(reg, 'line-height: ' + value)
return c
}

设置行距中遇到的问题：

问题一：设置完行距后，之前设置的样式消失；

// 行距
export const lineHeight = (value) => {
// 选择范围
let range = getRange()
let txt = range.extractContents().textContent
let length = txt.length
if (length === 0) {
return
}
// 删除被选择的内容
range.deleteContents()
// 创建新的元素
let span = document.createElement('span')
span.style.cssText = 'line-height: ' + value + ';display: inline-block;'
// 设置 span 内容
span.innerHTML = txt
// 在被选择的位置设置行距的元素
range.insertNode(span)
}

range.extractContents().textContent获取的是选区中纯文本内容，range.deleteContents()删除选取内容，

range.insertNode(span)插入加有行距的内容，致使会在设置行距之前的样式清除掉，这当然不符合我们的要求；

所以，需要获取带有样式的内容range.cloneContents()，然后再插入到选区中。

问题二：行距只能在当前行距的基础上设置大的行距，比如当前选区1.5倍行距只能设置2倍或更高，而不能设置1.5倍或更小行距；

span.style.cssText = 'line-height: ' + value + ';' 只设置行距时，会出现这种问题，加上display: inline-block;时，行距可自由设置；

span.style.cssText = 'line-height: ' + value + ';display: inline-block;'

因为span为行内元素，需要设置成block或 inline-block。