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

Question

问题

你好，我有一些代码，当点击一个按钮时，contentEditable <p> 标签中的所有内容的字体粗细都是 600（粗体）。

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

图片示例

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

Link 到 fiddle 包含代码：https://jsfiddle.net/AidanYoung/9tg4oas5/

Answer 1

您可以使用跨度标签并添加 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>

Answer 2

这是您的解决方案。

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>

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

Only apply styling to selected text in content editable <p>

javascript

html

jquery

css

contenteditable

问题

图片示例