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

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-height\s*:\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。