2015-02-10 68 views
1

方案標籤: 我的web應用程序允許用戶輸入和發送電子郵件:如何強制瀏覽器DOMDocument.ExecCommand()函數注入默認字體

<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以包含此信息的唯一選擇?

謝謝!

回答

1

幾點來考慮,而不是在你的DOM添加字體標籤

  1. 使用跨度。
  2. 然後爲該字段添加特定的字體類
  3. 更好地使用Jquery調用函數而不是onClick()內聯函數調用。

我爲您創建了一個解決方案請參考: - http://jsbin.com/janukeyeya/5/edit您可以看到div的字體切換。

+0

感謝您的示例。我認爲你稍微誤解了我的問題。我希望能夠突出顯示文本的一個子集,然後僅在該確切文本上更改字體。這很棘手,因爲沒有必要使用DOM元素來包裝這些文本,因此需要注入。 domDocument.ExecCommand提供了這個功能,但是在我上面的場景中,似乎在默認的字體大小寫中失敗了。 – 2015-02-10 22:28:17

+0

所以如果你用span選擇文本,那麼你的工作會做什麼? – PRAH 2015-02-10 22:29:26

+0

此外,爲了解決您的問題: 1)是跨度更好,但標記由瀏覽器本身添加。不是我的實現。 2)這在一般情況下,但如上所述,我不想風格整個。只有用戶突出顯示的子文本集。 3)是的,這會更好。因爲我的問題不是onClick事件 – 2015-02-10 22:29:41