Html 如何强制浏览器DOMDocument.ExecCommand（）函数注入<；字体>；默认字体的标记

情景： My web应用程序允许用户键入和发送电子邮件：

<div contenteditable="true">User can type email contents here</div>

大多数浏览器应用此字体更改的方式是在突出显示的文本周围的DOM中插入标记：

<font face='Arial Black'> highlighted text here </font> Here is some more text that was not highlighted. 

突出显示的文本此处还有一些未突出显示的文本。

这适用于除浏览器默认字体（“Times New Roman”（大多数浏览器为“Times New Roman”）之外的所有字体。如果我突出显示一些文本并选择“Times New Roman”，我注意到IE9+已经进行了优化，以实现这种字体已经是“Times New Roman”（因为它是默认的浏览器字体），并且不会向DOM中插入冗余标记。当电子邮件仍显示在当前浏览器中时，这是正常的，因为字体默认为“Times New Roman”。但是，当在另一个客户端中发送和打开电子邮件时，标记不会与电子邮件一起发送，因为它从未被注入DOM，因此呈现电子邮件的客户端可以使用它想要的任何默认字体，而这不是“Times New Roman”所必需的

我创建了一个JSFIDLE来说明这个问题。有关用法，请参见代码中的注释：

是否有人有任何想法可以将字体信息干净地注入页面？或者，手动“破解”DOM以包含此信息的唯一选项是什么

谢谢

需要考虑的几点

使用Span而不是在DOM中添加字体标记

然后将字体的特定类添加到该范围

最好使用Jquery调用函数，而不是onClick（）内联函数调用

---

我已经为您创建了一个解决方案，请参考：-您可以看到div的字体切换。

谢谢您的示例。不过我想你有点误解了我的问题。我希望能够突出显示文本的子集，然后仅更改该文本的字体。这是一个棘手的问题，因为不需要一个DOM元素完全包装这个文本，因此需要注入一个DOM元素。domDocument.ExecCommand提供了此功能，但是在我上面的场景中，默认字体的情况下似乎失败了。因此，如果您使用span包装所选文本，这会完成您的工作吗？同样，为了解决您的问题：1）是的，span更好，但标记是由浏览器本身添加的。不是我的实现。2） 这在一般情况下是有效的，但是如上所述，我不想设计一个完整的样式。只有用户高亮显示的文本子集。3） 是的，这会更好。由于我的问题不是onClick事件，所以我将其整合在一起，但我必须编写逻辑来标识所选文本，并向DOM中注入一个span。这是一个复杂的逻辑，很难编写跨浏览器支持。不知道是否有更干净的方法。好的，让我试着给你一个合适的解决方案

<font face='Arial Black'> highlighted text here </font> Here is some more text that was not highlighted.