高亮显示可编辑的文本并获得位置

时间:2019-02-26 15:09:39

标签: contenteditable

我目前正在为过时的所见即所得(WYSIWYG)开发一个插件,无法替换(旧版代码)。

之前我从未真正使用过contenteditable / WYSIWYG,所以我有点迷失了,我目前无法实现的是如何获取特定文本的位置并在其上移动弹出窗口。

因此,我需要添加一个“突出显示”元素作为覆盖或将文本包装起来。并获取突出显示的文本的位置

<div id="wrapper">
  <h2 contenteditable id="enter" placeholder="Enter the text to highlight here..."></h2>

  <div contenteditable id="area">
    Lorem ipsum dolor sit amet <b>consectetur</b> adipisicing elit. Blanditiis tenetur ipsa quisquam debitis porro mollitia quod. <b>Asperiores</b> <i>voluptatum</i>.
     <br>
    Qui non <s>molestias</s> illo repudiandae vel, <highlight>necessitatibus</highlight> tempore odit, temporibus, veritatis iusto?
  </div>
</div>

我也尝试过rangy.js插件,但我希望有一个没有jquery的简单解决方案,它似乎仅适用于textareas。

https://codepen.io/anon/pen/VRYKmm

0 个答案:

没有答案