如何讓TinyMCE的用戶改變背景？

我在我的網站上有一個TinyMCE編輯器。我已經添加了iBrowser，以便人們可以上傳圖片。沒關係。我也試着讓他們改變他們正在編輯的網站的背景，但沒有成功：如果我在背景中添加了帶有圖像的HTML div並返回到編輯器並按下回車鍵，將它移動到圖像下方，而不是另一條線。如何讓TinyMCE的用戶改變背景？

如何啓用用戶更改TinyMCE網站的背景圖片？

來源

2011-12-07 Tomasz Smykowski

你打算讓他們編輯整個頁面的源代碼，還是你想要某種帶有圖像的DIV？或者，您是否想爲他們提供設置背景圖片的方法，並讓後端服務爲發佈頁面設置樣式？ –

我完全同意佈雷特，我們需要一些更多的信息在這裏 – Thariama

謝謝你的問題。是的，我有這樣的工作方式，用戶將在TinyMCE中更改的背景將顯示在從TinyMCE生成的內容顯示的頁面上。我已經嘗試過使用DIV，但是當我設置背景時，它會在編輯器中顯示出來。但是當我按下輸入比TinyMCE跳到div下面，並做一些奇怪的事情。 –

將下面的代碼編輯器設置（其中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)");

注意，我已經內背景圖像風格的文檔只在Mac上的Safari和Firefox上進行了測試。

唯一的問題是，即使您正在編輯使用全頁插件仍然在獲取使用的getContent（）的內容不會返回與應用該樣式的文檔的整個HTML文檔。

如果您將TinyMCE加載到已定義樣式的文檔中，那麼TinyMCE將呈現它。

考慮到這一點，根據您如何向最終用戶提供選擇圖像的能力，一種方法是提供一種方法，在您保存的同時將選定的圖像細節發送回服務器該文檔並在那裏處理它，應用背景圖像樣式。

來源

2011-12-09 04:25:00

除了接受的答案之外，您可以稍後使用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的情況下尋找簡單的抓取解決方案。

來源

2014-01-09 08:31:33 werm098

如何讓TinyMCE的用戶改變背景？

回答

相關問題