在选定的 html 周围添加标签

Posted 2023-03-04

【中文标题】在选定的 html 周围添加标签

【英文标题】：Add tag around selected html

【发布时间】：2020-08-06 11:18:04

【问题描述】：

我有一个内容可编辑的 div，我想在用户选择文本并单击按钮后，在选择 html 周围添加一些 html 标记..

<div id="richtextbox" contenteditable="true" style="width: 200px; height: 100px; overflow-y: auto;border: 1px solid royalblue;">
    The <span style='color: red;'>quick</span> brown <i>fox</i> jumps over the <span style='background-color: yellow;'>lazy</span> dog.
</div>

敏捷的棕色狐狸跳过了懒惰的狗。

我想在用户突出显示文本“quick brown fox jumps”，我会得到 html 字符串

quick</span> brown <i>fox</i> jumps

并添加标签“b”开始选择并添加标签“/b”结束选择，结果：

<b>quick</span> brown <i>fox</i> jumps</b>

提前致谢！

【问题讨论】：

你能显示点击后你想要的结构吗？

嗨@balzacLeGeek，我确实编辑了问题

“棕色狐狸快速跳跃”

为什么不使用所见即所得的插件？

我不能使用插件，所以我正在寻找一种方法来自己做

【参考方案1】：

我会在你的 span 中添加一个 id，以便能够使用 getElementById() 访问对象并使用 innerHtml 属性：

html

<span id="my-id" style='color: red;'>quick</span> brown <i>fox</i> jumps over the <span style='background-color: yellow;'>lazy</span>

用标记包围的函数

function surroundWithMarkup(str, markup) 
  return `<$markup>$str</$markup>`

对方法的调用

// Could be inside an event like onclick for example
const mySpan = document.getElementById('my-id')
mySpan.innertHTML = surroundWithMarkup(mySpan.innertHTML, 'b') // if you want the bold markup

【讨论】：

无法使用您的解决方案，因为我想将标签添加到用户突出显示的元素中。例如：用户通过鼠标突出显示文本 -> 单击按钮设置粗体/斜体/颜色以突出显示文本

找到一种方法来检索当前选定的文本，然后将其传递给函数，然后将 innerHTML 与 str.replace() 函数结合起来，想要的行为应该可以工作

【参考方案2】：

你可以使用JQuery .wrap

$( ".inner" ).wrap("<div class='new'></div>")

JQuery .wrap