如何强制浏览器DOMDocument.ExecCommand（）函数为默认字体注入<font>标签</font>

Question

方案： 我的Web应用程序允许用户输入和发送电子邮件：

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

在他们撰写电子邮件时，他们可以突出显示某些文字，并选择一种新字体来更改该文字。实现它的方法是在DOMDocument对象上调用ExecCommand命令，以允许浏览器将此字体样式应用于突出显示的文本。

domDocument.ExecCommand("fontname", false, "Arial Black");

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

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

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

我创建了一个JSFiddle来显示这个问题。请参阅代码中的注释以了解用法 http://jsfiddle.net/8xq4dpb2/1/

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

谢谢！

Answer 1

需要考虑的几点

1. 使用Span而不是在DOM中添加字体标记。
2. 然后将字体的特定类添加到该范围
3. 最好使用Jquery来调用函数，而不是onClick（）内联函数调用。

我为您创建了一个解决方案请参考： - http://jsbin.com/janukeyeya/5/edit您可以看到div的字体切换。