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

Question

问题

嗨，我有一些代码，当单击按钮时，contentEditable <p> 中的所有内容都会显示出来。标签的字体粗细为 600(粗体)。

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

图像示例

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

链接到包含代码的 fiddle :https://jsfiddle.net/AidanYoung/9tg4oas5/

Answer 1

这是您的解决方案。

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

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