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

80 阅读 0 评论 53 点赞

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

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

复制代码

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

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

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
// 设置行距
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
}

设置行距中遇到的问题：

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

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 行距
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)
}