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

Posted 2023-05-08

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

【英文标题】：Only apply styling to selected text in content editable <p>

【发布时间】：2022-01-18 19:17:41

【问题描述】：

问题

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

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

图片示例

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

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

【问题讨论】：

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

【参考方案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>

【讨论】：

这确实将内容可编辑