仅将样式应用于可编辑内容中的选定文本 <p>答案

【问题标题】：Only apply styling to selected text in content editable <p>仅将样式应用于可编辑内容中的选定文本 <p>
【发布时间】：2022-01-18 19:17:41
【问题描述】：

问题

嗨，我有一些代码，当单击按钮时，contentEditable <p> 标记中的所有内容的字体粗细为 600（粗体）。

我想知道的是如何在按下按钮时做到这一点，而不是将 p 标签中的所有内容设置为 600 字体粗细，只设置所选文本的样式。例如，如果只突出显示 p 标签的前两个单词并按下按钮，则只有前两个单词的字体粗细会发生变化。

图片示例

在示例中，当按下按钮时，只有前两个单词的字体粗细会改变。

包含代码的小提琴链接：https://jsfiddle.net/AidanYoung/9tg4oas5/

【问题讨论】：

我建议您查看@timdown 的“rangy”项目。

标签： javascript html jquery css contenteditable

【解决方案1】：

这是您的解决方案。

function changeBold() {
    const   text = window.getSelection().toString();
    var btn = document.createElement('span');
    btn.innerHTML = text;
    btn.style.fontWeight = 'bold';
    document.execCommand('insertHTML', false, btn.outerHTML);
    
}

    <p contenteditable="true" id="contenttxt">
      Some text in this paragraph tag
    </p>
    <button onclick="changeBold()">Bold selected text</button>

【讨论】：

谢谢！完美运行！

【解决方案2】：

可以使用span标签并添加ID

function changeBold() {
    document.getElementById("strongC").style.fontWeight = "600";
}

<p contenteditable="true" id="contenttxt">
    <span id="strongC">Some text</span>
    in this paragraph tag
</p>
<button onclick="changeBold()">Bold selected text</button>

【讨论】：

这确实将内容可编辑
标签的前两个单词加粗，但前两个单词只是一个示例。我一直在寻找一种将所选文本加粗的方法。例如，如果选择了最后两个单词，它会将最后两个单词加粗。如果选择了中间的单词，它会将中间的单词加粗。