如何使TinyMCE用戶更改背景？

Question

我的網站上有一個TinyMCE編輯器。 我添加了iBrowser，以便人們可以上傳圖形。 沒關系。 我也嘗試過使他們更改正在編輯但未成功的網站的背景：如果我在背景圖像中添加HTML div並返回編輯器並按Enter，它將使我移動到圖像下方，而不是另一行。

如何讓用戶在TinyMCE中更改網站的背景圖像？

Answer 1

以下代碼將在編輯器中設置文檔的背景圖像樣式（其中ed是對當前TinyMCE實例的引用）

var edObj = ed.dom.getRoot();

//Set the Style "background-image" to the button's color value.
ed.dom.setStyle(edObj, 'background-image', "url(some_background_image.jpg)");

注意，我僅在Safari和Mac上的Firefox上對此進行了測試。

唯一的問題是，即使您正在使用整頁插件來編輯整個HTML文檔，當您使用getContent（）檢索內容時，它仍然不會返回具有所應用樣式的文檔。

如果使用已定義背景圖像樣式的文檔加載TinyMCE，則TinyMCE將對其進行渲染。

考慮到這一點，取決於您如何向最終用戶提供選擇圖像的能力，一種方法是提供一種在保存文檔和過程的同時將所選圖像詳細信息發送回服務器的方法。在那里，應用背景圖片樣式。

Answer 2

唯一可以接受的答案是，您以后可以使用getStyle（）以類似的方式檢索設置的值。 使背景圖像輕松顯示在預覽中非常有用。

var edObj = ed.dom.getRoot();
//gets the value that looks like "url(/someImage.jpg)"
//notice getStyle() instead of setStyle
//The boolean at the end is if you want the computed style
var background = ed.dom.getStyle(edObj, 'background-image', true);
document.body.style.background = background;

對於顯示預覽的彈出窗口，請使用：

var edObj = tinyMCEPopup.editor.dom.getRoot();
var background = tinyMCEPopup.editor.dom.getStyle(edObj, 'background-image', true);
document.body.style.background = background;

確保在<body>標簽之后調用此方法，否則document.body將是未定義的。

我希望這可以幫助其他人在不導入jQuery的情況下尋找簡單的抓斗解決方案。

如何使TinyMCE用戶更改背景？

問題描述

2 個解決方案

解決方案1
4 已采納 2011-12-09 04:25:00

解決方案2
0 2014-01-09 08:31:33

如何使TinyMCE用戶更改背景？

問題描述

2 個解決方案

解決方案1 4 已采納 2011-12-09 04:25:00

解決方案2 0 2014-01-09 08:31:33

解決方案1
4 已采納 2011-12-09 04:25:00

解決方案2
0 2014-01-09 08:31:33