Javascript execCommand h1仅为选定文本设置样式

我正在处理带有突出显示选项的自定义文本区域。 现在添加了h1-h4和粗体选项

问题：

当我选择文本并单击Heading1按钮时，它会设置整行未选择文本的样式。当我点击粗体按钮时，它只为选中的文本设置样式

我只想对所选文本而不是整行应用h1-h4样式

这是我的代码：

引导示例
评论
标题1
标题2
头3
头4
大胆的
示例注释
$（函数（）{
$（“.btn”）。单击（函数（）{
var命令=$（this）.data（“命令”）；
如果（命令=='h1'| |命令=='h2'| |命令=='h3'| |命令=='h4'）
document.execCommand（'formatBlock'，false'，）；
其他的
document.execCommand（命令）；
})
})

我喜欢你的问题。我不知道这个api。但请下次使用ES6（现在到处都是）和括号来表示块表达式

因此，从文件

在包含当前选择的行周围添加一个HTML块级元素，如果存在，则替换包含该行的块元素（在Firefox中是例外-它将包装任何包含的块元素）。需要标记名字符串作为值参数。几乎可以使用所有块级元素

但您可以使用

insertHTML

命令

引导示例
评论
标题1
标题2
头3
头4
大胆的
示例注释
$（函数（）{
$（“.btn”）。单击（函数（）{
var命令=$（this）.data（“命令”）；
如果(
命令==“h1”||
命令==“h2”||
命令==“h3”||
命令==“h4”
) {
const selection=window.getSelection（）；
document.execCommand(
“插入TML”，
假,，
`${selection}`
);
}否则{
document.execCommand（命令）；
}
});
});

非常感谢，它正在工作，但转到下一行。我是否应该为h1命令使用内联块css是的，如果您希望在同一行上，因为默认情况下标题是

block

。可能也会有一些问题，但我希望你明白了这个概念。现在它正在工作，但由于insertHtml，它正在删除现有的格式，假设斜体文本存在，我想为此应用h2样式，它将删除斜体样式，只应用我所说的h2样式。我只是给出了基本概念，怎么做