【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)// 选中区域的htmllet 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().textContentlet length = txt.lengthif (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-height\s*:\s*(\d+(\.*\d+)?)/iglet c = content.replace(reg, 'line-height: ' + value)return c
}

设置行距中遇到的问题：

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

// 行距
export const lineHeight = (value) => {// 选择范围let range = getRange()let txt = range.extractContents().textContentlet length = txt.lengthif (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。