【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-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。