gpt4 book ai didi

javascript - 内联文本的CSS垂直突出显示

转载 作者:行者123 更新时间:2023-11-28 00:48:53 24 4
gpt4 key购买 nike

我允许用户突出显示文档中的文本,当它突出显示时,将通过在左侧装订线中显示一个垂直条来表示。我需要帮助在下面的屏幕截图的左侧绘制垂直条突出显示。

黑条为文本的样机截图

enter image description here

CodePen with current attempts I Will be referencing

我已经能够使用 getSelection() 捕获选择.我在选择周围添加了一个内联元素。我需要有关指定文档的哪个部分被选中的垂直条的帮助。

我已经尝试了一些东西,但我有点迷路了。

此文本显示在 <pre> 中.希望保留 <pre>尽可能完美。我正在尝试找到一种方法来通过普通的旧 HTML/CSS/JS 获得这个装订线,而不需要像 Angular GutterComponent 那样复杂的东西,它必须跟踪大量的偏移量、高度和位置。

1) 追加一个相对-绝对 <div>

我想我可以通过附加一个相对定位的 div 来摆脱困境具有绝对 div 所需的装订线位置通过调用 getBoundingClientRect() 获取行内元素的高度和顶部.

这很糟糕,因为调用 getBoundingClientRect()不适用于内联元素,如 CodePen 中所示。此外,divs创建一个可能会打断文本 block 的新行。

2) 使每个突出显示的部分成为 block 元素并使用边框

这很糟糕,因为我无法在不弄乱文档其余部分的间距的情况下将边框正​​确放置在装订线中。它也有与上述相同的问题,将文本分解为 block 元素。


我主要是在寻找有关如何在左侧创建这些高亮显示以使其跨越内联元素的整个高度的指导。

我也读过这个问题,但我无法解析出如何在这里实际应用这些概念,我需要一些指导 Inline elements and line-height

谢谢

最佳答案

最简单的方法是跟随一个(但它不适合调整大小)。

选择一些文本并稍等一下:

var t;

function mark() {
var selection = getSelection()

if (selection.isCollapsed) return

var rect = selection.getRangeAt(0).getBoundingClientRect()
var base = document.body.getBoundingClientRect()

var span = document.createElement('span')
span.style.top = rect.top - base.top + 'px'
span.style.height = rect.height + 'px'
document.body.appendChild(span)
}

document.addEventListener('selectionchange', function (e) {
clearTimeout(t)
t = setTimeout(mark, 1000)
})
body {
padding-left: .75em;
position: relative;
}

span {
position: absolute;
left: 0;
width: .25em;
background: blue;
}
<p>I'm allowing a user to highlight text in a document and when it is highlighted, it will be denoted by showing a vertical bar in the left gutter. I need help drawing the vertical bar highlights on the left side of the below screenshot.
<p>Mockup screenshot where black bars would be text
<p>CodePen with current attempts I Will be referencing
<p>I am already able to capture the selection using getSelection(). I am adding an inline element around the selection. I need help with the vertical bars that designate which part of the document was selected.
<p>I've tried a couple things that get partially there and I'm a little lost.
<p>This text is displayed in a &lt;pre&gt;. The desire is to keep the &lt;pre&gt; as prestine as possible. I'm trying to find a way to get this gutter through plain old HTML/CSS/JS without something complex like an angular GutterComponent that would have to track a ton of offsets, heights, and positions.

关于javascript - 内联文本的CSS垂直突出显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48631538/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com