如何在contenteditable元素中設置CSS字體大小？

我想用JavaScript創建一個小型HTML編輯器，我可以將選定文本的字體大小設置爲某個特定的CSS值。根據文檔的字體大小被設定爲這樣的字號命令：如何在contenteditable元素中設置CSS字體大小？

document.execCommand("FontSize", false, x);

x必須在1和7之間的字體大小的結果是，所選擇的內容是包裹着一個<font size="x" />元件。這不是非常有用，因爲我想創建一個字體大小超過7的下拉框，並且我希望使用像素作爲字體大小單位，所以最後我希望所選文本使用像<span style="font-size:25px" /> 。我怎麼做？

我搜索了已經存在的HTML編輯器組件，但只找到了兩種類型的庫：像CKEditor這樣的大型東西，它們能夠做我想要的東西，但這對於我的目的來說很大，而小型庫僅支持這7種字體大小。

那麼如何在自定義的HTML元素中設置自定義字體大小？它必須在最新的Firefox和Chromium和IE7-9中工作。

來源

2012-01-04 kayahr

你可能不得不做自己做。獲取選定的文本，刪除它，創建一個新的跨度，將文本放入，給出所需樣式的跨度，將跨度插入到文檔中。順便說一句，'font-size =「25px」'不是一個正確的屬性。你的意思是'style =「font-size：25px」'，或者在js中，'theElement.style ['fontSize'] ='25px';' – 2012-01-04 11:26:11

@Mr Lister：只是一個大腦的錯字。修正了它，謝謝你的提示。手動操作涉及的遠遠多於描述的內容。字體大小也必須從所有子元素中移除，並且如果可能的話，新引入的跨度必須與父元素合併以防止無用的包裝跨度的無限堆疊。然後它還是不夠的，因爲當你選擇一個整段時，span跨過像「p」這樣的塊元素。所以完全手動完成這個過程非常複雜，我希望能有一個更簡單的解決方案。但我恐怕沒有... – kayahr 2012-01-04 11:54:27

你爲什麼認爲簡單的編輯器不提供這個選項，而像CKEditor這樣的更復雜的編輯器呢？就像你說的那樣，它很複雜，需要一堆代碼，以便您可以編寫代碼或使用現有的編輯器將其配置爲滿足您的需求並刪除不需要的部分。 – AlfonsoML 2012-01-04 13:34:49

你可以嘗試使用Rangy這個。這是一個跨瀏覽器庫，它試圖消除所有瀏覽器中的範圍/選擇的錯誤和不一致性。 http://code.google.com/p/rangy/

GET範圍選擇
range.extractContents（），並存儲在var中
插入（用ID）的新跨越節點 - range.insertNode（節點）
jQuery的更新新步驟2 var的節點例如$（「＃spanid」）HTML（docFragment）

看到這裏所有範圍的方法： http://code.google.com/p/rangy/wiki/RangyRange#Methods

來源

2012-02-09 15:46:34 MorganTiley

如何在contenteditable元素中設置CSS字體大小？

回答

相關問題